Jquery 要在单击表格行时获取当前表格数据的值吗_Jquery_Html Table_Tablerow

Jquery 要在单击表格行时获取当前表格数据的值吗

jquery

Jquery 要在单击表格行时获取当前表格数据的值吗,jquery,html-table,tablerow,Jquery,Html Table,Tablerow,我有一个表，其中有多行，每行都有表数据。现在我想在单击当前tr时获取表数据的数据链接属性我的表格结构如下： <tr id="row1jqxgrid" role="row" data-key="1"> <td class="jqx-cell jqx-cell-darkblue jqx-grid-cell jqx-grid- cell-darkblue jqx-item jqx-item-darkblue jqx-grid- cell-nowrap jqx-

我有一个表，其中有多行，每行都有表数据。现在我想在单击当前tr时获取表数据的数据链接属性

我的表格结构如下：

<tr id="row1jqxgrid" role="row" data-key="1">
<td class="jqx-cell jqx-cell-darkblue jqx-grid-cell jqx-grid-       cell-darkblue jqx-item jqx-item-darkblue jqx-grid-      cell-nowrap jqx-grid-cell-nowrap-darkblue" style="max-width:350px; width:350px;border-left-width: 0px;" role="gridcell">
<span class=""></span>
 <span class="jqx-tree-grid-title jqx-tree-grid-title-darkblue jqx-grid-cell-wrap jqx-grid-cell-wrap-darkblue">Accenture222</span></td>
    <a class="ClickClass" data-link="http://www.recruiterfeedback.com/trs/index.php/recruiter/feedback_details/174">
        <button class="btn btn-primary btn-sm ClickClass">
            <i class="fa fa-search"></i> View
        </button>
    </a>
    </td>
</tr>

顺便说一下，在Accenture222之后还有一个额外的结束语

属性

数据链接

是表中锚元素的一部分。因此，您需要首先使用

.find（）

或

.chilren（）

将该锚定作为目标，然后获取其数据属性

$("#jqxgrid").on('click', function() {
        var current = $(this).find('a.ClickClass').data("link");
        alert(current);
    });

工作示例：


$（文档）.ready（函数（）{
$（“#jqxgrid tr”）。单击（函数（）{
var link=$（this）.find（“td”）.eq（1）.find（“a”）.data（“link”）；
警报（链接）；
});
});
埃森哲222
看法

谢谢你的代码很有魅力。。同时也感谢您指出“td”的错误。这段代码仅供实际参考，它工作得很好。

$("tr").click(function() {
    var link = $("#"+$(this).attr('id')+" .ClickClass").attr('data-link');
    alert(link);
);

$("#jqxgrid").on('click', function() {
        var current = $(this).find('a.ClickClass').data("link");
        alert(current);
    });

<!doctype html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
        <script>
            $(document).ready(function () {

                $("#jqxgrid tr").click(function () {
                    var link = $(this).find("td").eq(1).find("a").data("link");
                    alert(link);
                });
            });
        </script>
    </head>

    <body>
        <table id="jqxgrid">
            <tr id="row1jqxgrid" role="row" data-key="1">
                <td class="jqx-cell jqx-cell-darkblue jqx-grid-cell jqx-grid-cell-darkblue jqx-item jqx-item-darkblue jqx-grid-      cell-nowrap jqx-grid-cell-nowrap-darkblue" style="max-width:350px; width:350px;border-left-width: 0px;" role="gridcell">
                    <span class=""></span>
                    <span class="jqx-tree-grid-title jqx-tree-grid-title-darkblue jqx-grid-cell-wrap jqx-grid-cell-wrap-darkblue">Accenture222</span>
                </td><td>
                    <a class="ClickClass" data-link="http://www.recruiterfeedback.com/trs/index.php/recruiter/feedback_details/174">
                        <button class="btn btn-primary btn-sm ClickClass">
                            <i class="fa fa-search"></i>
                            View
                        </button>
                    </a>
                </td>
            </tr>
        </table>
    </body>
</html>