Question

我有以下表结构：

<tr class="tabrow" val="12345"> 
    <td class="clickable">abcde</td> 
    <td class="clickable">fghij</td> 
    <td class="clickable">2016-03-03 15:35:45</td> 
</tr>

当我点击任何字段时，我想要一种获取行的val的方法。到目前为止，我已经得到了这个：

$('.clickable').on('click', function() {
    evID = $(this).closest('tr').val();
    alert(evID);
})

这不起作用;它只返回一个空白结果。我也试过这个，这也行不通：

evID = $(this).parent().val();

我做错了什么？

Answer 1

尝试使用.attr(attributeName)代替.val()，

$('.clickable').on('click',function() {
   evID = $(this).closest('tr').attr("val");
   alert(evID);
});

.val()可用于在其对象（节点对象）中具有value属性的表单元素。

DEMO

Answer 2

您可以使用closest()查找父tr，然后使用attr()从中获取val属性：

$('.clickable').on('click', function() {
   var evID = $(this).closest('tr').attr("val");
   console.log(evID);
})

请注意，val不是tr元素的有效属性，而是表示您的HTML无效。这也是您使用val()方法无效的原因。相反，您应该使用data-*属性并通过data()检索它：

<tr class="tabrow" data-val="12345"> 
    <td class="clickable">abcde</td> 
    <td class="clickable">fghij</td> 
    <td class="clickable">2016-03-03 15:35:45</td> 
</tr>

$('.clickable').on('click', function() {
   var evID = $(this).closest('tr').data("val");
   console.log(evID);
})

Answer 3

对于表行元素，val不是有效属性。您应该使用data-val之类的数据属性：

<tr class="tabrow" data-val="12345"> 
   <td class="clickable">abcde</td>  
   <td class="clickable">fghij</td> 
   <td class="clickable">2016-03-03 15:35:45</td> 
</tr>

然后在单击表格单元格时尝试获取该值。假设点击的td始终是意味着tr的childNode（应该是）。

$('.clickable').on('click', function(e) {
   var valueFromParentTR = $(e.currentTarget).parent().attr("data-val");
   console.log(valueFromParentTR); // don't use alert, just open your console.
});

您可以在任何元素上使用任何data-[whatever]属性来实现这些目的。

Answer 4

找到最近的tr并附加一个类示例：

$(this).closest('tr').addClass('blink_me');

addClass('blink_me')等的其他替代品......

css('background-color','#fff')
removeClass('blink_me')

Answer 5

您可以在tr中使用data属性：

<tr class="tabrow" data-val="12345"> 
    <td class="clickable">abcde</td> 
    <td class="clickable">fghij</td> 
    <td class="clickable">2016-03-03 15:35:45</td> 
</tr>
$(".clickable").("click", function(){
    var clickedTdParent = $(this).parent();
    var trValue = clickedTdParent.data().val
})

点击时获取父级的值

5 个答案:

DEMO