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

how to get the value of tr of a table using jquery on click

提问by Wang'l Pakhrin

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

我想在单击功能上获取所选 tr 的值。到目前为止我尝试过的

$(".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 :)

问题是我无法将其解决到我单击的相应“tr”，而是获取.table. 任何人都可以解决这里的问题吗？我真的很感激！谢谢 ：）

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 !!

注意：它需要（单击），因为我必须使用 ajax 替换 tr 并且仅使用单击功能将无法识别新元素！

Jquery version 1.9.1

jQuery 版本 1.9.1

回答by Praveen

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

JSFiddle

JSFiddle

回答by Pat Dobson

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

您（如您所说）获得的是表的价值，而不是 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.

那应该得到正确的值。

回答by Rohan Kumar

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

你的代码也工作看演示，检查是否已纳入jquery version >= 1.7或尝试write在你的代码$(function(){...})就可以run在你的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 idthen why you used valueuse id="1" and so on..

此外，如果是id，那么为什么你用value用id="1" and so on..

Updatedif above not works then try this which never fails(IMHO) if your htmlis valid,

更新如果以上不起作用然后尝试这个永远不会失败（恕我直言），如果你html是valid，

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

回答by bipen

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) .onwas introduced only after jquery 1.6

很好地使用 HTML5 数据属性。这就是为什么在 HTML5 中引入数据属性的确切原因。并确保您使用的是 jquery 的最新版本 (> 1.6).on仅在 jquery 1.6 之后引入

HTML

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

jQuery

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

回答by Neeraj Singh

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

好的，看看这个以获得 Tr 值或 Td 值：

HTML Code:

HTML代码：

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

jQuery代码：

$(".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)

现场演示 (JsFiddle)