I have an example table

<table class="table">
  <tr value="1" class="side-link">
    <td>one</td>
    <td>two</td>
  </tr>
 <tr value="2" class="side-link">
    <td>one</td>
    <td>two</td>
  </tr>
</table>

I want to get the value of the selected tr on click function. what I've tried so far

$(".table").on('click','.side-link',function(e){
    e.preventDefault();
    var id = $(this).attr('value');
    alert(id);
}); 

the problem is I cannot address this to the respective "tr" I click , instead it gets the value of .table. Can anyone solve the issue here? I would be really grateful! THanks :)

Note: it needs ( on click ) because I've to replace tr using ajax and the new elements wont be recognized by just using click function !!

Jquery version 1.9.1

I have an example table

<table class="table">
  <tr value="1" class="side-link">
    <td>one</td>
    <td>two</td>
  </tr>
 <tr value="2" class="side-link">
    <td>one</td>
    <td>two</td>
  </tr>
</table>

I want to get the value of the selected tr on click function. what I've tried so far

$(".table").on('click','.side-link',function(e){
    e.preventDefault();
    var id = $(this).attr('value');
    alert(id);
}); 

the problem is I cannot address this to the respective "tr" I click , instead it gets the value of .table. Can anyone solve the issue here? I would be really grateful! THanks :)

Note: it needs ( on click ) because I've to replace tr using ajax and the new elements wont be recognized by just using click function !!

Jquery version 1.9.1

• javascript
• jquery
• html

• 2 looks fine to me jsfiddle.net/arunpjohny/MyuFV/1 – Arun P Johny Commented Nov 7, 2013 at 9:50
• are you want 'tr' value or all 'td' value inside 'tr'..? – Nono Commented Nov 7, 2013 at 9:53
• @HasanAlaca, if you don't want to answer then fine ! – Wang'l Pakhrin Commented Nov 7, 2013 at 9:58
• @rid, appreciate your help ! thanks budd – Wang'l Pakhrin Commented Nov 7, 2013 at 10:28

5 Answers 5

$(".table").on('click','tr',function(e){
    e.preventDefault();
    var id = $(this).attr('value');
    alert(id);
}); 

JSFiddle

You're (as you say) getting the value of the table, not the TR

Amend your code like this:

$(".table tr").on('click','.side-link',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
}); 

That should get the correct value.

well use HTML5 data attribute.. this is the exact reason, why data attribute was introduce in HTML5. And make sure you are using jquery's latest version (> 1.6) .on was introduced only after jquery 1.6

HTML

 <table class="table">
   <tr data-value="1" class="side-link">
     <td>one</td>
     <td>two</td>
   </tr>
 <tr data-value="2" class="side-link">
    <td>one</td>
    <td>two</td>
 </tr>
</table>

jQuery

$(".table").on('click','.side-link',function(e){
  e.preventDefault();
  var id = $(this).data('value');
  alert(id);
});

Okay, look this for get Tr value or Td value:

HTML Code:

<table class="table" border='1'>
    <tr value="1" class="side-link">
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr value="2" class="side-link">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

jQuery Code:

$(".table").on('click', 'tr', function () {
    var trValue = $(this).attr('value');
    var tdValue = $(this).children('td').map(function (index, val) {
            return $(this).text();
        }).toArray();
        // all td value with comma seprated
    alert(tdValue);
    // current tr attr value
    alert(trValue);
});

Live Demo (JsFiddle)

Your code also working see Demo, check that you have included jquery version >= 1.7 or try to write your code in $(function(){...}) it may run before your table renders

You can also try it like,

$(function(){
    $(".table .side-link").on('click',function(e){
        e.preventDefault();
        var id = $(this).attr('value');
        alert(id);
    });
});

Demo

Also if it is id then why you used value use id="1" and so on..

Updated if above not works then try this which never fails(IMHO) if your html is valid,

$(function(){
    $(document).on('click',".table .side-link",function(e){
        e.preventDefault();
        var id = $(this).attr('value');
        alert(id);
    });
});