檢查數據表API中的子行
[英]Check child row in datatables API
問題描述
我在js中有以下代碼：
$('#db tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
window.open(data['Link'], data['Details']);
} );
當我在子行中時：
$(this).parents('tr')
將解析為子行，而不是父行。 在子行中時如何首先獲取父行？ 如何檢查行的類名，然后獲取父行，以便在按下按鈕時可以打開新選項卡？
完整代碼：
js代碼：
var table = $('#db').DataTable( {
responsive: true,
ajax: 'php/table.db.php',
columns: [
{
"data": "first name"
},
{
"data": "last name"
},
{
"targets": -1,
"data": null,
"defaultContent": "<button>Link</button>"
}
],
select: true,
lengthChange: false
} );
$('#db tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
window.open(data['link'], data['first name']);
} );
HTML
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fh-3.1.2/kt-2.2.1/r-2.1.1/sc-1.4.2/se-1.2.2/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fh-3.1.2/kt-2.2.1/r-2.1.1/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.db.js">
</script>
<style>
thead input {
width: 100%;
padding: 3px;
box-sizing: border-box;
text-align : center;
}
</style>
</head>
<body class="bootstrap">
<div class="container">
<table data-page-length='25' cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="db" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Link</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Link</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
1 個解決方案
解決方案1
0 2017-08-12 09:08:39
嘗試.closest（）。 它在dom中上升，直到到達選擇器上的第一個匹配項。 例如。 $（this）.closest（“ tr”）將相對於$（this），在第一個tr中在dom樹中上升。
像：html> body> table> tr> .... {除tr> ...> td> button以外的任何東西，如果您單擊按鈕（= $（this）），您將在此處獲得tr：html> body> table> tr和.closest（“ tr”）。
數據表子行問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.