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?

Why do you have two click events on the same selector? You also have the same iD on several tr's... — n8wrl, Feb 26 '14 at 15:20
Try a little debugging yourself. Open the console and you'll see some errors like `Object # has no method 'stopPropagation'` which means you're calling a jQuery method on a non-jQuery object. — j08691, Feb 26 '14 at 15:21
IDs and Classes can't begin with numbers. See here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Kai Qing, Feb 26 '14 at 15:22
Use `data-id` attributes instead if you need duplicate ids as duplicate `id=` are not valid HTML. — iCollect.it Ltd, Feb 26 '14 at 15:22

iCollect.it Ltd · Accepted Answer · 2014-02-26T16:10:31.240

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 (e.g. 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);
});

thanks for your answer, but still, the alert is not generated. — randytan, Feb 26 '14 at 15:36
@randytan: The alerts are working fine in the JSFiddle... where are you clicking? — iCollect.it Ltd, Feb 26 '14 at 15:37
this table is generated from the Servlet. Then appended into div. is it cause this? — randytan, Feb 26 '14 at 15:42
1. Try my fiddle and confirm that it does work as you expect. 2. You will need to change your server code to inject `data-id` instead of `id`s or 3. use `attr('id')` where I have `data('id')` and hope for the best with your duplicate IDs :) — iCollect.it Ltd, Feb 26 '14 at 15:45
@randytan: In case you cannot update the server code (which will a real shame) I have update my answer to support id's http://jsfiddle.net/TrueBlueAussie/fw5ty/1/ — iCollect.it Ltd, Feb 26 '14 at 15:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48497/discussion-between-randytan-and-trueblueaussie) — randytan, Feb 26 '14 at 15:51

score 1 · Answer 2 · answered Feb 26 '14 at 15:25

1

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.

answered Feb 26 '14 at 15:25

ChaoticNadirs

2,280
2
20
27

if i need the value of id still the same, is change the id attribute is possible? @chaoticnadirs – randytan Feb 26 '14 at 15:29
This is not an answer to the (many) problems. This is a repeat of comments. Who on Earth up-voted this? – iCollect.it Ltd Feb 26 '14 at 15:33
@randytan if you want them both to have value '0' change to . You'll also need to change the javascript to find the class rather than id. – ChaoticNadirs Feb 26 '14 at 15:42
You should not recommend using numbers in class names!!! That's what `data-` attributes are for. – iCollect.it Ltd Feb 26 '14 at 15:48
numbers can be in class names. just not the first character – Kai Qing Feb 26 '14 at 15:49
@Kai Qing: I repeat: *You should not recommend using numbers in class names!!!* **That's what data- attributes are for.** Class names are for CSS and not data. – iCollect.it Ltd Feb 26 '14 at 15:50
That's an argument for data attributes, not explicitly what they are for. Someone may be using css in conjunction with incremental class names or ID's, so to say numbers should never at all be in class names or ID's is a matter of opinion. They work fine if they are prefixed with anything a-z. For this guy's purpose, you're totally right, it appears. Data attributes may be the way to go if he is only using them for some data reference. – Kai Qing Feb 26 '14 at 15:57
@Kai Qing: Yes, you can have "digits" in class names (not as first character and therefore they are not "numbers"). I should have said "You should not recommend putting numeric data in class names" and avoid the arguments :) – iCollect.it Ltd Feb 26 '14 at 16:04

score 0 · Answer 3 · answered Feb 26 '14 at 15:24

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);
});

Sample fiddle

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.

hi if i change the id attribute to something else e.g. var is it possible? because the value of the current id must be same like that. (0) — randytan, Feb 26 '14 at 15:29
@randytan it should be possible, as long as you don't have repeated IDs on your HTML — DarkAjax, Feb 26 '14 at 15:30

score 0 · Answer 4 · answered Feb 26 '14 at 15:36

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.

`closest` will never work for the TD as it is below the TR clicked (not above). That is why you get `undefined`. — iCollect.it Ltd, Feb 26 '14 at 15:40

Getting Value From Table TR id and TD id

4 Answers4

Update from chat:

Previous details:

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

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

Linked