jQuery find element with id in row

Question

I have a simple table, I'm trying to send text value from cells .name and .date into form using jQuery. This script works pretty well, but I don't know how find only text with class for example .name in only this row, where the user cliced on Book-button.

My table structure:

      <table id="myTable"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Date</th> 
    <th>Place</th> 
    <th>Price</th> 
    <th>Hours</th> 
    <th>Book</th> 
</tr> 
</thead> 
<tbody> 
      <tr> 
    <td class="name"><a href="#" title="title1">Camp1</a></td>  //send to form this value
    <td class="date">10.09 - 15.09.2014 r.</td>   //send to form this value
    <td>Brighton</td> 
    <td>555 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td>   //when user click on this button
</tr> 

          <tr> 
    <td class="name"><a href="#" title="title1">Camp2</a></td> 
    <td class="date">02.09 - 22.09.2014 r.</td> 
    <td>Brighton</td> 
    <td>432 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td> 
</tr>     
<tr> 
    <td class="name"><a href="#" title="title1">Camp3</a></td> 
    <td class="date">23.09 - 27.09.2014 r.</td> 
    <td>Brighton</td> 
    <td>123 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td> 
</tr> 
</tbody></table>

          </tbody> 
</table>

My script:

<script>
$( "button" ).click(function() {
var text = $( '.name' ).text();
$( "#name" ).val( text );
var text = $( '.date' ).text();
$( "#date" ).val( text );
});
</script>

My form:

<fieldset id="contact_form" style="display:none;">
<div id="result"></div>
    <label for="name"><span>Name</span>
    <input type="text" name="name" id="name" placeholder="Enter Your Name" />
    </label>

    <label for="email"><span>Email Address</span>
    <input type="email" name="email" id="email" placeholder="Enter Your Email" />
    </label>

        <label><span>&nbsp;</span>
        <button class="submit_btn" id="submit_btn">Submit</button>
        </label>
    </fieldset>
        <button c

lass="submit_btn" id="submit_btn">Submit</button>
    </label>
</fieldset>

https://stackoverflow.com/a/50271394/7186739 – Billu May 10 '18 at 11:01 — Billu, May 10 '18 at 11:01

Blazemonger · Accepted Answer · 2014-08-04T17:08:16.627

http://api.jquery.com/category/traversing/tree-traversal/

$( "button" ).click(function() {
    var text = $(this).closest('tr').find('.name').text();
    $( "#name" ).val( text );
    text = $(this).closest('tr').find('.date').text();
    $( "#date" ).val( text );
});

Better yet, surround each button with a <form> with <input type="hidden"> elements containing that data, and it will work even without JavaScript enabled.

score 2 · Answer 2 · answered Aug 04 '14 at 17:05

The problem is in your JavaScript. You need to target only what the user clicked. This can be done by using the this object in in the click callback function.

$( ".book button" ).click(function() {
    var tr = $( this ).parents('tr');
    $( "#name" ).val( tr.find('.name').text() );
    $( "#date" ).val( tr.find('.date').text() );
});

Other notes:

You can only use var to declare a variable once. Afterwards, use the variable without var.
// Cannot be used for commenting in HTML. You must use

`.parents` will return multiple table rows if nested tables are used. `.closest` is a better choice. — Blazemonger, Aug 04 '14 at 17:08

score 1 · Answer 3 · answered Aug 04 '14 at 17:02

1

$("button").click(function() {
var text1 = $(this).closest('tr').find('.name').text();
alert(text);
$("#name").val( text1 );
var text2 = $(this).closest('tr').find('.date').text();
$("#date").val( text2 );
});

Demo:

http://jsfiddle.net/u68wJ/

answered Aug 04 '14 at 17:02

RGS

5,131
6
37
65

score 0 · Answer 4 · answered Aug 04 '14 at 17:08

0

This ahould work.
$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});

answered Aug 04 '14 at 17:08

Xriuk

382
2
7
26

score 0 · Answer 5 · answered Aug 04 '14 at 17:09

Check out this jsfiddle http://jsfiddle.net/Dz24f/

Basically when you click a button, you need to get it's parent element, which is the row, then get siblings of that row with the given jquery selector.

$("button").click(function () {
    var _this = $(this);
    var text = _this.parent().siblings('.name').text();
    console.debug(text);
    $("#name").val(text);
    var date = _this.parent().siblings('.date').text();
    console.debug(date);
    $("#date").val(date);
});

score 0 · Answer 6 · answered May 10 '18 at 11:03

Find elements with id in row and assign to other elements using jquery

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});

jQuery find element with id in row

6 Answers6