获取 JQuery 数据表中特定行的 ID

Question

我有如下图所示的 JQuery 表

单击“操作”列中的V 链接文本后，我想提醒ProductID

    <table id="productTable">

        <thead>
            <tr>
                <th>ProductID</th>
                <th>TitleEN</th>
                <th>TypeEN</th>
                <th>ModifiedDate</th>
                <th>Actions</th>
            </tr>
        </thead>

    </table>  


    @* Load datatable css *@
    <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />

@section Scripts{
    @* Load DataTable js here *@
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
                $(document).ready(function () {
                    $("#productTable").DataTable({
                        "info": false,
                        "processing": true, 
                        "serverSide": true, 
                        "filter": false, 
                        "orderMulti": false, 
                        "ajax": {
                            "url": "/Home/LoadProductData",
                            "type": "POST",
                            "datatype": "json"
                        },
                        "columns": [
                                { "data": "Product_ID", "name": "Product_ID", "autoWidth": true },
                                { "data": "Product_Title_EN", "name": "Product_Title_EN", "autoWidth": true },
                                { "data": "Product_Type_EN", "name": "Product_Type_EN", "autoWidth": true },
                                { "data": "ModifiedDate", "name": "ModifiedDate", "autoWidth": true },
                                {
                                   data: null,
                                   className: "center",
                                   defaultContent: '<a href="" class="editor_view"> V </a>'
                                }
                                  ]
                    });
                });

                $('#editor_view').on('click', 'a.editor_view', function (e) {

                    alert($("data-Product_ID").val());

                });

    </script>

}

目前我是这样提醒它的

alert($("data-Product_ID").val());

但它无法获取该 ID，我可以这样做吗？

这是表格行的html

<tr class="even" role="row">
<td class="sorting_1">02</td>
<td>Current Accounts</td>
<td>Assets</td>
<td></td>
<td class=" center">
<a class="editor_view" href="#"> V </a>
</td>

Answer 1

将脚本更改为

$("#productTable").on('click', '.editor_view', function() {
    var ID = $(this).closest('tr').find('td').eq(0).text();
    alert(ID);
});

请注意，您动态生成表格行，因此您需要在第一次生成视图时将事件委托附加到 DOM 中存在的元素（即带有 id="productTable" 的元素）。

Answer 2

下面是我的数据表。

table_low_stocks.dataTable({
            "bLengthChange": true,
            "processing": false,
           // "serverSide": true,
            "bPaginate": false,
            "bInfo": false,
            "iDisplayLength" : 5,
            "bSort" : true,
            "ajax": {
                'type': 'POST',
                'url': "<?=action('AdvertiserproductsController@postLowstockproducts')?>"
            },
"columns": [
                /* {"data": "sr_no"}, */
                {"data": "product_name"},
                {"data": "inventory"},
                {"data": "update"} 
            ] // set first column as a default sort by asc
        });

这就是我渲染 HTML（来自控制器的数据表）的方式

return Datatables::of($data)
                        ->add_column('action','<a data-productid="{{$sr_no}}" class="label label-sm label-messages-btn update-product"> <i class="fa fa-pencil-square-o"></i> Update Stock </a>')
                        ->make(true);

如果你在上面看到我已经给了 data-productid="{{$sr_no}}" 一个标签

所以最终这就是你无论如何都要付出的。

现在来自 jquery 部分。所做的是 .

$(document).on("click",".update-product", function(e){
        e.preventDefault();


                var getProductId = $(this).data("productid");
                alert(getProductId);
        });

我得到了产品 ID :-)

给数据属性做喜欢

data-productid="{{$sr_no}}"

要获取数据属性，您必须使用

$(selector).data("productid");

希望这对您有所帮助。

Answer 3

$('#editor_view').on('click', 'a.editor_view', function (e) {
   alert($("data-Product_ID").val());
});

这里你使用了“editor_view”作为ID，我可以看到它被设置为一个类，所以它不起作用。应该是这样的

$('.editor_view').on('click', 'a.editor_view', function (e) {
  alert($("data-Product_ID").val());
});