Question

我有一个表，其中我有多行，每个都有表数据。现在我想获得表数据的数据链接属性，点击当前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);
});

Answer 1

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

顺便说一句，在Accenture222之后你还有一个额外的关闭</td>

JSFiddle

Answer 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/

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

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

3 个答案: