返回 tr 标签的“值”属性[关闭]答案

【问题标题】：Return "value" attribute of a tr tag [closed]返回 tr 标签的“值”属性[关闭]
【发布时间】：2013-03-05 08:25:28
【问题描述】：

我有下表：

<table id="messages" border="1">
  <tbody>
    <tr>
      <th>Name</th>
      <th>Text</th>
      <th>Subject</th>
    </tr>
    <tr value="1">
      //data
    </tr>
    <tr value="2">
      //data
    </tr>
  </tbody>
</table>

我需要一些 jquery 来返回点击的 tr 的 val 属性。我已经有 jquery，它将返回 tr 内所有封闭 td 的数组，但我仍然需要将“值”保存到变量中。有什么帮助吗？

【问题讨论】：

非输入元素不应该有value属性；而是使用custom data-* 属性来维护有效的 HTML（尽管仅在 HTML5 中有效）。
即使在非 HTML5 浏览器中，jQuery 也可以使用 .data() 访问 data- 属性。
@Blazemonger：我从来没有说过它不能，我只是说data-* 属性在 HTML 中无效，除非它是 HTML5。
@DavidThomas：我所知道的该规则的一个例外是li 元素，其中value 属性是有效的，很奇怪。

标签： javascript jquery return-value html-table

【解决方案1】：

不建议将value 属性添加到非输入元素，因为这对浏览器没有意义。将<tr value="1"> 更改为<tr data-value="1"> 并使用$tr.data('value') 访问它（其中$tr 是一个唯一表行的jQuery 对象）。

http://api.jquery.com/data/

【讨论】：

注意：他可能还需要代码来获取正确的tr
@NathanKoop 澄清，谢谢。
试过了，但我收到错误：TypeError: $(...).data is not a function [Break On This Error] alert($(this).data('value') );
公平地说，当前的大多数浏览器都会合理地处理该属性，以启用 polyfills。（见鬼，AngularJS 似乎依赖于此。）不过，对于前向兼容性来说，这仍然不是一个好主意。
@Mildfire 什么版本的 jQuery？

【解决方案2】：

您可以使用$(this).attr('value') 来获取属性，但某些浏览器可能不支持这样的非标准属性。最好使用数据属性：

<tr data-value="1">

然后你可以使用$(this).data('value')获取值。

【讨论】：

如果浏览器存在/永远存在会拒绝无效属性但接受data-* 属性，我会非常、非常、非常惊讶。据我了解，它们背后的基本原理主要是前缀形成了一个命名空间，W3C / 浏览器供应商永远不会引入他们自己的属性。（虽然由于某种原因，有人可能决定在 tr 标签上定义 value 属性，但突然您的页面开始在该浏览器中执行一些奇怪的操作。）
@millimoose 不同之处在于，您可以使用原生 JavaScript 中的 .value 属性来检索表单元素的 value。另一方面，tr 没有.value 属性。 jsfiddle.net/0xnkmnqn

【解决方案3】：

使用 Jquery

var variable = $('tr').val();

或者

var variable = $('tr').attr('value');

即使给 tr 元素赋值是不正确的

【讨论】：