I've following HTML table:

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
                      <thead>
                        <tr id="jumbo">
                          <th style="vertical-align:middle">Products</th>
                          <th style="vertical-align:middle">Pack Of</th>
                          <th style="vertical-align:middle">Quantity</th>
                          <th style="vertical-align:middle">Volume</th>
                          <th style="vertical-align:middle">Unit</th>
                          <th style="vertical-align:middle">Rebate Amount</th>
                        </tr>
                      </thead>
                      <tbody class="apnd-test">
                        <tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
                      </tbody>
<tfoot>
                        <tr id="reb1_2">
                          <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tfoot>                                           
                    </table>

Now I want to get the id of first row from . The id in this case is reb1_1. For getting it I tried below code but it didn't work.

$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table tbody:tr:first').attr('id');
    alert(row);
});

});

Thank you.

I've following HTML table:

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
                      <thead>
                        <tr id="jumbo">
                          <th style="vertical-align:middle">Products</th>
                          <th style="vertical-align:middle">Pack Of</th>
                          <th style="vertical-align:middle">Quantity</th>
                          <th style="vertical-align:middle">Volume</th>
                          <th style="vertical-align:middle">Unit</th>
                          <th style="vertical-align:middle">Rebate Amount</th>
                        </tr>
                      </thead>
                      <tbody class="apnd-test">
                        <tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
                      </tbody>
<tfoot>
                        <tr id="reb1_2">
                          <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tfoot>                                           
                    </table>

Now I want to get the id of first row from . The id in this case is reb1_1. For getting it I tried below code but it didn't work.

$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table tbody:tr:first').attr('id');
    alert(row);
});

});

Thank you.

• javascript
• jquery
• html

• you might find this useful stackoverflow.com/questions/10381296/… – PPrasai Commented May 5, 2014 at 5:57

3 Answers 3

first go to table tbody then find tr then filter first row like below

var row = $(this).closest('table').find(' tbody tr:first').attr('id');

or can try

 var row = $(this).closest('table').find(' tbody tr:eq(0)').attr('id');

reference :first and :eq

Make changes as shown in demo :-

http://jsfiddle.net/avmCX/38/

 $(document).ready(function() {
    $('.products').click(function () {
  var row = $(this).closest('table').find('tbody tr:first').attr('id');


        alert(row);
    });

    });

For more info have a look here :-

http://api.jquery.com/first/

change your function to this:

$(document).ready(function() {
    $('.products').click(function () {
        var id =  $(this).closest("table").find("tbody>tr").first().attr("id");
        alert(id);
    });
});

this will show you the id.