Question

我正在使用"jquery": "^3.4.0"和DataTables 1.10.18。

我有下表：

$(document).ready(() => {
  var table = $('.datatable-responsive').DataTable();
});

$("#edit-row").click(() => {
  var c = this.id
  console.log(c)
});

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->
  <!-- Core JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->
  <!-- Load plugin -->
  <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <!-- /load plugin -->
  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">
    <!-- Default ordering -->
    <div class="card">
      <div class="card-body">
        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Status</th>
              <th>Title</th>
              <th>Image</th>
              <th>Profile</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>-2</td>
              <td><span class="badge badge-success">Posted</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Joe</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>99</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Cool Post</td>
              <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Brad</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>10</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Tom</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>

</html>

我正尝试在点击的编辑按钮上放置一个点击侦听器。

但是，我目前只能拿回undefined。相反，我想在第一列中获取ID。

有人建议我在做什么错吗？

Answer 1

您使用的箭头函数会将$('#yourId').toggleClass('yourclassname');的范围更改为this，以便引用元素的范围，最简单的方法是避免为这些处理程序使用箭头函数，而仅使用传统函数：

window

$(document).ready(function() {
  var table = $('.datatable-responsive').DataTable();
});

$("#edit-row").click(function() {
  var c = this.id
  console.log(c)
});

但是，如果仍然需要箭头功能，则将<!DOCTYPE html> <html lang="en"> <head>  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css"> <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css"> <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>   <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>   <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script> <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script> </head> <body class="navbar-top">  <div class="page-content pt-0">  <div class="card"> <div class="card-body"> <table class="table datatable-responsive dataTable" style="width:100%"> <thead> <tr> <th>#</th> <th>Status</th> <th>Title</th> <th>Image</th> <th>Profile</th> <th class="text-center">Actions</th> </tr> </thead> <tbody> <tr> <td>-2</td> <td><span class="badge badge-success">Posted</span></td> <td>Awesome Post</td> <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td> <td>Joe</td> <td class="text-center"> <div class="list-icons"> <div class="dropdown"> <a href="#" class="list-icons-item" data-toggle="dropdown"> <i class="icon-menu9"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a> <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a> </div> </div> </div> </td> </tr> <tr> <td>99</td> <td><span class="badge badge-secondary">Queued</span></td> <td>Cool Post</td> <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td> <td>Brad</td> <td class="text-center"> <div class="list-icons"> <div class="dropdown"> <a href="#" class="list-icons-item" data-toggle="dropdown"> <i class="icon-menu9"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a> <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a> </div> </div> </div> </td> </tr> <tr> <td>10</td> <td><span class="badge badge-secondary">Queued</span></td> <td>Awesome Post</td> <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td> <td>Tom</td> <td class="text-center"> <div class="list-icons"> <div class="dropdown"> <a href="#" class="list-icons-item" data-toggle="dropdown"> <i class="icon-menu9"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a> <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a> </div> </div> </div> </td> </tr> </tbody> </table>  </div> </div> </div> </body> </html>参数传递给箭头功能，并使用event获取元素引用。

要获取第一列中的event.target，可以找到最近的表格行，然后选择第一表格列以获取该文本值。
您需要对所有这些行使用类选择器，而不要使用id选择器id，因为#edit-row在HTML页面中应该是唯一的。

id

$(document).ready(() => {
  var table = $('.datatable-responsive').DataTable();
});

$(".edit-row").click((e) => {
  var c = e.target.id
  var hashId = $(e.target).closest('tr').find('td:eq(0)').text().trim();
  console.log(hashId)
});

Answer 2

点击处理程序中的this指向全局Window对象，因为您使用的是箭头功能，请将其更改为常规回调，它将按预期工作。

检查this answer以获得更多信息。

$(document).ready(() => {
  var table = $('.datatable-responsive').DataTable();
});

$("#edit-row").click(function(event) {
  var c = this.id;
  console.log(c)
});

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->
  <!-- Core JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->
  <!-- Load plugin -->
  <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <!-- /load plugin -->
  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">
    <!-- Default ordering -->
    <div class="card">
      <div class="card-body">
        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Status</th>
              <th>Title</th>
              <th>Image</th>
              <th>Profile</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>-2</td>
              <td><span class="badge badge-success">Posted</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Joe</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>99</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Cool Post</td>
              <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Brad</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>10</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Tom</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

我仅以您的代码为例，并在 jQuery 中进行一些更改。

请尝试一下，希望它对您有用。

Private Sub PictureBox_MouseMove(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseMove, PictureBox2.MouseMove, PictureBox3.MouseMove, PictureBox4.MouseMove, PictureBox5.MouseMove, PictureBox6.MouseMove, PictureBox7.MouseMove
    DirectCast(sender, PictureBox).Image = Image.FromFile(picturePath)
End Sub

$(document).ready(() => {
    var table = $('.datatable-responsive').DataTable();

    $(document).on("click", "#edit-row", function(){
        console.log('Id : ', $(this).closest('.text-center').siblings('.sorting_1').text());
        alert('Id : '+ $(this).closest('.text-center').siblings('.sorting_1').text());
    });
});

Answer 4

考虑到您的最终目标（可编辑的数据表），我将允许我自己对您的应用进行一些改进，以使您不需要确实需要获取点击行的ID并完成所有操作HTML本身就很繁重。

我建议您使用嵌入式ajax选项，而不要使用外部AJAX调用来填充数据表

$("#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: ''
    }
})

使用columns.render选项修改单元格内容，使其显示为标志或下拉菜单

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>
        `
      }
    ]
});

使用上面的行号来修改目标表行，使用DataTables API方法（例如，row().remove()进行删除），我将使用最简单的示例（在前端删除行），因为关于您要同时修改后端数据还是要修改前端数据，没有太多的细节

//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();
});

可以over here找到示例项目的完整工作 DEMO ，也可以使用此link在浏览器的开发工具中检查该演示。

PS 如果由于某种原因您仍然决定继续使用该方法，则可以查询this帖子（与您的帖子非常相似）以获取数据模型点击行的属性（尤其是“ id”）

Answer 5

DataTables有自己的解决方案，您可以使用select extension来获取选定的行数据，其中有一个example对您非常有用

获取点击行的ID

5 个答案: