获取点击行的id
[英]Get id of clicked row
问题描述
I am using "jquery": "^3.4.0" and DataTables 1.10.18 .
我正在使用"jquery": "^3.4.0"和DataTables 1.10.18 。
I am having the following table:我有下表：
$(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>
I am trying to put a click listener on the clicked edit button.我试图在点击的编辑按钮上放置一个点击监听器。
However, I currently only get undefined back.但是，我目前只返回undefined 。 Instead I would like to get the id within the first column back.相反，我想取回第一列中的 id。
Any suggestions what I am doing wrong?有什么建议我做错了吗？
5 个解决方案
解决方案1
2 2019-04-23 06:31:38
You are using arrow functions that will change the scope of this to window so to reference the scope of the element, easiest way is to avoid arrow functions for those handlers and simply use traditional functions:您正在使用将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> <.-- 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>
However, if you still want the arrow functions then pass a event parameter to the arrow function and get the element reference using event.target .但是，如果您仍然需要箭头函数，则将event参数传递给箭头函数并使用event.target获取元素引用。
- To get the
idthat you have in the first column you can find the closest table row then select the first table column to get that text value.要获取第一列中的id，您可以找到最近的表行，然后选择第一个表列以获取该文本值。 - You need to use a class selector for all those rows instead of id selector
#edit-rowasidshould be unique in the HTML page.您需要为所有这些行使用类选择器而不是 id 选择器#edit-row，因为id在 HTML 页面中应该是唯一的。
$(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) });
<: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="#" class="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="#" class="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="#" class="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>
解决方案2
2 2019-04-23 06:39:03
The this in the click handler was pointing to the global Window object because you were using arrow function, change it to a regular callback and it will work as expected.单击处理程序中的this指向全局Window对象，因为您使用的是箭头函数，将其更改为常规回调，它将按预期工作。
Check this answer for more information.查看此答案以获取更多信息。
$(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>
解决方案3
2 已采纳 2019-04-23 07:05:35
I just use your code as example and make some changes in jQuery .我只是以您的代码为例，并在jQuery中进行了一些更改。
Please try this, hope this works for you.请试试这个，希望这对你有用。
$(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()); }); });
<: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>
解决方案4
1 2019-04-23 07:34:52
DataTables has own solution, you can use select extension to get selected row data, there is an example very useful for you DataTables 有自己的解决方案，你可以使用select extension来获取选定的行数据，有一个 例子对你很有用
解决方案5
1 2019-04-23 12:23:47
Considering your ultimate goal (editable DataTable), I'll allow myself to suggest few improvements to your app, so that you don't really need to get id of clicked row and do all the HTML heavy lifting on your own.考虑到您的最终目标（可编辑的数据表），我将允许自己对您的应用程序提出一些改进建议，这样您就不需要真正获取单击行的 ID 并自行完成所有 HTML 繁重的工作。
- Instead of using external AJAX-call to populate your DataTables, I'd recommend to use embedded
ajaxoption我建议使用嵌入式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: ''
}
})
- use
columns.renderoption to modify cell contents, to make it appear as a badge or drop-down menu使用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>`
}
...
]
})
- and essential point - leave row number mark within dropdown element upon rendering, so you can access this value later on as you need to edit/delete table row和要点- 在呈现时在下拉元素中留下行号标记，以便您稍后可以在需要编辑/删除表行时访问此值
$("#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>
`
}
]
});
- use above row numbers in order to modify target table row, using DataTables API methods (eg
row().remove()for deletion), I'll use simplest example (deletion of the row in the front-end), since you didn't share much details as for whether you want to modify both back end and front end data or only the latter使用上面的行号来修改目标表行，使用 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();
});
Complete working DEMO of your sample project can be found over here or you can examine that demo in your browser's Dev Tools, using this link .您可以在此处找到示例项目的完整工作演示，或者您可以使用此链接在浏览器的开发工具中检查该演示。
PS if, for some reason, you still decide to proceed with your approach, you may inquiry this post (which is pretty similar to yours) for a way of getting data model properties ('id', in particular) of clicked row PS如果出于某种原因，您仍然决定继续使用您的方法，您可以查询这篇文章（与您的文章非常相似）以获取单击行的数据模型属性（特别是“id”）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何获得点击行的ID值？ - How to get the clicked row's id value?
获取单击复选框的jqGrid行的ID - Get the Id of an jqGrid row where a checkbox is clicked
获取从MVC表中单击的行的ID - Get Id of the row clicked from the table in MVC
单击行中按钮时如何在 Javascript 中获取 ID - how can I get ID in Javascript when in row button clicked
如何获取表格行中被点击元素的ID？ - How to get the id of a clicked element within a table row?
如何获取被点击的行的ID并使用该ID显示该行的信息-使用ribs.js - How to get the id of the clicked row and using that id display that row's information-Using backbone.js
获取点击的身份证 - Get clicked li id
获取点击ID <li> - Get ID of clicked <li>
获取点击元素的ID - Get ID of element clicked
获取Clicked Link的ID - Get ID of a Clicked Link
相关标签