Question

21

Getting Value From Table TR id and TD id

rated 0 times [ 28] [ 7] / answers: 1 / hits: 41133 / 11 Years ago, wed, february 26, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ingridcassieb

Add To Favorites

Follow

Total Points: 346

Total Questions: 97

Total Answers: 125

Location: North Korea

Member since Fri, Nov 4, 2022

2 Years ago

answered 11 Years ago darleneh · Accepted Answer

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

});