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，并且只使用click函数就不会识别新元素!!

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(){...})代码run table renders { {1}}

你也可以试试，

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

Demo

如果是id，那么您使用value的原因是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

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

Answer 5

好的，看看这个获得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);
});

<强> Live Demo (JsFiddle)

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

5 个答案:

JSFiddle