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

Question

我有一个示例表

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

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

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

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

注意：它需要（点击时）因为我必须使用 ajax 替换 tr 并且仅使用点击功能不会识别新元素！

jQuery 版本 1.9.1

Answer 1

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

JSFiddle

Answer 2

您（如您所说）获得表格的价值，而不是 TR

像这样修改你的代码：

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

那应该得到正确的值。

Answer 3

您的代码也可以正常工作，请参阅Demo，检查您是否已包含jquery version >= 1.7或尝试在您write的代码中$(function(){...})包含您的代码runtable renders

你也可以试试看，

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

演示

另外，如果这id就是您使用valueuse的原因id="1" and so on..

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

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

Answer 4

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

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代码：

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

现场演示（JsFiddle）

Answer 5

很好地使用 HTML5 数据属性。这就是为什么在 HTML5 中引入数据属性的确切原因。并确保您使用的是 jquery 的最新版本 (> 1.6).on仅在 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);
});