Getting Value From Table TR id and TD id

Question

I have problems getting id from tr and td in my table.

Let's say I have a table like this:

<table class="table table-hover" id="table_tingkat_jual">
<thead>
 <tr>
   <th>Tingkat Penjualan</th>
   <th>SA</th>
   <th>Kode SA</th>
   <th>Kuantiti Terendah (lusin)</th>
   <th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
 <tr id='0'>
  <td>Diatas Rata-Rata</td>
  <td id='1'>1 </td>
  <td>AG</td>
  <td>3870</td>
  <td>5782</td>
 </tr>
 <tr id='0'>
  <td>Diatas Rata-Rata</td>
  <td id='3'>3 </td>
  <td>CA</td>
  <td>1080</td>
  <td>3780</td>
 </tr>
</tbody>
</table>

I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).

This is my syntax in jQuery:

$('#table_tingkat_jual tr').click(function(){
    this.stopPropagation();
});

$('#table_tingkat_jual tr').click(function() {
    var trid = $(this).closest('tr').attr('id');
    alert("TR ID " + trid);
    var tdid = $(this).closest('td').attr('id');
    alert("TD ID " + tdid);
});

But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).

What's wrong?

Answer 1

Update from chat:

It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):

$(document).on('click', '#table_tingkat_jual tr', function (e) {
    e.stopPropagation();
    var $this = $(this);
    var trid = $this.closest('tr').data('id');
    alert("TR ID " + trid);
    var tdid = $this.find('td[data-id]').data('id');
    alert("TD ID " + tdid);
});

Previous details:

There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).

You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (eg to avoid clicks in parent objects).

It appears you also want to drill down for the TD values, so try this:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/

$('#table_tingkat_jual tr').click(function(e) {
    e.stopPropagation();
    var $this = $(this);
    var trid = $this.closest('tr').data('id');
    alert("TR ID " + trid);
    var tdid = $this.find('td[data-id]').data('id');
    alert("TD ID " + tdid);
});

data('id') is a short-cut for attr('data-id') .

note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.

<table class="table table-hover" id="table_tingkat_jual">
    <thead>
        <tr>
            <th>Tingkat Penjualan</th>
            <th>SA</th>
            <th>Kode SA</th>
            <th>Kuantiti Terendah (lusin)</th>
            <th>Kuantiti Tertinggi (lusin)</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id='0'>
            <td>Diatas Rata-Rata</td>
            <td data-id='1'>1</td>
            <td>AG</td>
            <td>3870</td>
            <td>5782</td>
        </tr>
        <tr data-id='0'>
            <td>Diatas Rata-Rata</td>
            <td data-id='3'>3</td>
            <td>CA</td>
            <td>1080</td>
            <td>3780</td>
        </tr>
    </tbody>
</table>

If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:

http://jsfiddle.net/TrueBlueAussie/fw5ty/1/

$('#table_tingkat_jual tr').click(function(e) {
    e.stopPropagation();
    var $this = $(this);
    var trid = $this.closest('tr').attr('id');
    alert("TR ID " + trid);
    var tdid = $this.find('td[id]').attr('id');
    alert("TD ID " + tdid);
});

Answer 2

you have two elements with the same id:

<tr id='0'>

id should be unique. Use a class if you want both to be 0, or assign one a different value.

Answer 3

The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td , that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find() :

$('#table_tingkat_jual tr').click(function() {
    var trid = $(this).closest('tr').attr('id');
    alert("TR ID " + trid);
    var tdid = $(this).find('td[id]').attr('id');
    alert("TD ID " + tdid);
});

Also I'd get rid of:

$('#table_tingkat_jual tr').click(function(){
    this.stopPropagation();
});

And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.

Answer 4

Maybe you forgot to include jquery? I just included jQuery from google and let the script wait until the document is completly loaded.

I also gave the different ids, but that was not the problem i think.

I also recommend giving all the an ID, because now he alerts undefined ID.

For me it works like this:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#table_tingkat_jual tr').click(function() {
    var trid = $(this).closest('tr').attr('id');
    alert("TR ID " + trid);
    var tdid = $(this).closest('td').attr('id');
    alert("TD ID " + tdid);
    });
    });
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
 <tr id='0'>
   <th>Tingkat Penjualan</th>
   <th>SA</th>
   <th>Kode SA</th>
   <th>Kuantiti Terendah (lusin)</th>
   <th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
 <tr id='1'>
  <td>Diatas Rata-Rata</td>
  <td id='1'>1 </td>
  <td>AG</td>
  <td>3870</td>
  <td>5782</td>
 </tr>
 <tr id='2'>
  <td>Diatas Rata-Rata</td>
  <td id='3'>3 </td>
  <td>CA</td>
  <td>1080</td>
  <td>3780</td>
 </tr>
</tbody>
</table>
<body>
</html>

Hope it helps.