想要在点击表格行时获取当前表格数据的值答案

【问题标题】：Want to get the value of current tabe data on click of table row想要在点击表格行时获取当前表格数据的值
【发布时间】：2016-04-18 20:31:16
【问题描述】：

我有一个表格，其中有多行，每行都有表格数据。现在我想获取当前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>

我尝试使用 jquery ass 来获取它，但没有成功：

$("#jqxgrid").on('rowSelect', function() {
    var current = $('#jqxgrid').attr('data-link');

    alert(current);

    var args = event.args;

    var rowData = args.row;
    //  var a_href = $(this).find(rowData);
    // alert(a_href); 
    var rowKey = args.key;

    console.log(args);
    console.log(rowKey);
    console.log(event);
});

【问题讨论】：

标签： jquery html-table tablerow

【解决方案1】：

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

顺便说一句，在 Accenture222 之后，您还有一个额外的结束 </td>

JSFiddle

【讨论】：

感谢您的代码像魅力一样工作......也感谢您指出“td”错误。此代码仅供参考，实际运行良好。

【解决方案2】：

属性data-link 是表格内锚元素的一部分。因此，您需要首先使用.find() 或.chilren() 定位该锚点，然后获取其数据属性。

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

工作示例：https://jsfiddle.net/DinoMyte/1jgo6mpc/3/

【讨论】：

【解决方案3】：

<!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>

【讨论】：