Javascript 获取已单击行的id

我使用的是

“jquery”：“^3.4.0”

和

数据表1.10.18

我有下表：

$（文档）.ready（（）=>{
var table=$（'.datatable-responsive'）.datatable（）；
});
$（“#编辑行”）。单击（（）=>{
var c=this.id
控制台日志（c）
});

#
地位
标题
形象
轮廓
行动
-2
张贴
令人敬畏的职位
乔
99
排队
冷柱
布拉德
10
排队
令人敬畏的职位
汤姆
您使用的箭头函数将
此
的范围更改为
窗口
，因此要引用元素的范围，最简单的方法是避免这些处理程序使用箭头函数，而只需使用传统函数：


$（文档）.ready（函数（）{
var table=$（'.datatable-responsive'）.datatable（）；
});
$（“#编辑行”）。单击（函数（）{
var c=this.id
控制台日志（c）
});

#
地位
标题
形象
轮廓
行动
-2
张贴
令人敬畏的职位
乔
99
排队
冷柱
布拉德
10
排队
令人敬畏的职位
汤姆
您使用的箭头函数将
此
的范围更改为
窗口
，因此要引用元素的范围，最简单的方法是避免这些处理程序使用箭头函数，而只需使用传统函数：


$（文档）.ready（函数（）{
var table=$（'.datatable-responsive'）.datatable（）；
});
$（“#编辑行”）。单击（函数（）{
var c=this.id
控制台日志（c）
});

#
地位
标题
形象
轮廓
行动
-2
张贴
令人敬畏的职位
乔
99
排队
冷柱
布拉德
10
排队
令人敬畏的职位
汤姆
单击处理程序中的
此
指向全局
窗口
对象，因为您正在使用箭头函数，请将其更改为常规回调，它将按预期工作

查看更多信息


$（文档）.ready（（）=>{
var table=$（'.datatable-responsive'）.datatable（）；
});
$（“#编辑行”）。单击（函数（事件）{
var c=this.id；
控制台日志（c）
});

#
地位
标题
形象
轮廓
行动
-2
张贴
令人敬畏的职位
乔
$("#posts").DataTable({
    //specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
    //where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
    //if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
    ...
    ajax: {
      url: "/getdata"
      dataSrc: ''
    }
})

dataTable = $("#posts").DataTable({
    ...
    columns: [
      { data: "id", title: "Id" },
      {
        data: "status",
        title: "Status",
        //render status as a badge, having class, based on status value
        render: data => `<span class="badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
      }
      ...
    ]
})

$("#posts").DataTable({
    ...
    columns: [
      ...
      {
        data: null,
        title: "Actions",
        //render 'Actions' column as a drop-down menu wrapper,
        //appending 'row' attribute with corresponding row number
        //as a value
        render: (data, type, row, meta) => `
        <div class="dropdown" row="${meta.row}">
        <a href="#" class="list-icons-item" data-toggle="dropdown">
          <i class="icon-menu9"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a href="#" class="dropdown-item edit-row"><i class="icon-pencil"></i>Edit</a>
          <a href="#" class="dropdown-item delete-row"><i class="icon-bin"></i>Delete</a>
        </div>
      </div>
        `
      }
    ]
});

//delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
    //grab dropdown wrapper and obtain row number
    const rowNumber = $(this)
        .closest(".dropdown")
        .attr("row");
    //delete corresponding table row and re-draw the table
    dataTable.row(rowNumber).remove();
    dataTable.draw();
});