jquery - 在 html 表中获取 <tr> 的值答案

【问题标题】：jquery - get the value of <tr> in a html tablejquery - 在 html 表中获取 <tr> 的值
【发布时间】：2014-04-30 09:24:31
【问题描述】：

我有一个 AJAX 创建的表。

我需要在那些通过 ajax 创建的表上调用 ajax 请求。

通过this，我发现可以在动态创建的 HTML 元素上调用 click 函数。

表格看起来像这样。

<table>
    <thead>
        <th>Sr. No</th>
        <th>Label</th>
    </thead>
    <tbody>
        <tr value="1">
            <td>1.</td>
            <td>One</td>
        </tr>
        <tr value="2">
            <td>2.</td>
            <td>Two</td>
        </tr>
    </tbody>
</table>

我已经为tr 赋值，现在我想在点击tr 时创建另一个ajax 请求。并根据我正在运行查询以获取数据的值。

我面临的挑战是我无法获得tr 的值。

这是我尝试过的代码。

$(文档).ready(函数() { $('.table').on('click', 'table tbody tr', function() { 警报($(this).val()) }) })

这是fiddle。

即使在小提琴中，我也无法获得 tr 的值。

请帮我找出哪里出错了。

提前致谢。

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

您可以改用 .attr()：

$(document).ready(function() {
    $('.table').on('click', 'table tbody tr', function() {
        alert($(this).attr('value'))
    })
})

Updated Fiddle

但实际上你应该使用data-* HTML5 属性：

<tr data-value="1">

然后使用.data()检索它：

$(document).ready(function() {
    $('.table').on('click', 'table tbody tr', function() {
        alert($(this).data('value'))
    })
})

Updated Fiddle

【讨论】：

非常感谢。我马上改。顺便说一句，使用data-value 和value 有什么区别？为什么我在使用val()时无法获取数据？
value 是 tr 元素的无效 HTML 属性。这就是为什么你需要使用data-value。 data-* 属性允许您在所有被视为 valid 的 HTML 元素上嵌入自定义数据属性
我确实通过了this。所以，在我要传递我的私人数据的所有情况下，最好使用data-*？

【解决方案2】：

$(document).ready(function() {
    $('.table').on('click', 'table tbody tr', function() {
        alert($(this).attr("value"));
    })
})

见http://jsfiddle.net/tqQm5/4/

【讨论】：

【解决方案3】：

使用 tr 的 text() 属性替换 val() 属性。

看到这个Fiddle

查看此代码

$(document).ready(function() {
    $('.table').on('click', 'table tbody tr', function() {
       alert($(this).text())
    })
})

【讨论】：

【解决方案4】：

试试这个用法.attr()

alert($(this).attr("value"));

【讨论】：