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?

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

Solution 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.

Comments

[n8wrl]

Why do you have two click events on the same selector? You also have the same iD on several tr's...

[Govind Singh]

both table rows have the same id

[randytan]

@n8wrl which one? the this.stopPropagation?

[j08691]

Try a little debugging yourself. Open the console and you'll see some errors like Object #<HTMLTableRowElement> has no method 'stopPropagation' which means you're calling a jQuery method on a non-jQuery object.

[Kai Qing]

IDs and Classes can't begin with numbers. See here: stackoverflow.com/questions/70579/…

[Gone Coding]

Use data-id attributes instead if you need duplicate ids as duplicate id= are not valid HTML.

[randytan]

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]

if i need the value of id still the same, is change the id attribute is possible? @chaoticnadirs

[DarkAjax]

@randytan it should be possible, as long as you don't have repeated IDs on your HTML

[Gone Coding]

This is not an answer to the (many) problems. This is a repeat of comments. Who on Earth up-voted this?

[randytan]

thanks for your answer, but still, the alert is not generated.

[Gone Coding]

@randytan: The alerts are working fine in the JSFiddle... where are you clicking?

[randytan]

the row in the table. @TrueBlueAussie

[Gone Coding]

closest will never work for the TD as it is below the TR clicked (not above). That is why you get undefined.

[ChaoticNadirs]

@randytan if you want them both to have value '0' change <tr id="0"> to <tr class="0">. You'll also need to change the javascript to find the class rather than id.

[randytan]

this table is generated from the Servlet. Then appended into div. is it cause this?

[Gone Coding]

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 ids or 3. use attr('id') where I have data('id') and hope for the best with your duplicate IDs :)

[Gone Coding]

@randytan: In case you cannot update the server code (which will a real shame) I have update my answer to support id's jsfiddle.net/TrueBlueAussie/fw5ty/1

[Gone Coding]

You should not recommend using numbers in class names!!! That's what data- attributes are for.

[Kai Qing]

numbers can be in class names. just not the first character

[Gone Coding]

@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.

[randytan]

let us continue this discussion in chat

[Kai Qing]

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.

[Gone Coding]

@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 :)