如何在点击时使用jquery获取表的tr值

Question

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

Answer 1

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

JSFiddle

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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)