我有一個填充動態(tài)數(shù)據(jù)的表。最后一列有一個按鈕，當(dāng)我單擊該按鈕時，我想將行 ID 傳遞給 JS 函數(shù)。我需要 id，因為我正在執(zhí)行 POST Ajax 請求，成功后我想獲取響應(yīng)數(shù)據(jù)并使用新數(shù)據(jù)更新所選行。這就是我插入新行時要做的事情：var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();但是我該怎么做才能獲取行 ID 并使用響應(yīng)數(shù)據(jù)更新它呢？編輯。數(shù)據(jù)表：<table id="myTable" class="display compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Reg</th> <th>Edit</th> </tr> </thead> <tbody> <?php foreach (get_all_customers_list() as $user) { ?> <tr> <td> <b> <?php echo $user["recipient_name"]; ?></b> </td> <td> <?php echo $user["registration_date"]; ?> </td> <td> <button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button> </td> </tr> <?php }?> </tbody> </table>
2 回答
白板的微信
TA貢獻(xiàn)1883條經(jīng)驗 獲得超3個贊
因為您只想獲得row id行clicked編輯按鈕的。您可以簡單地使用函數(shù)并傳遞單擊按鈕的table.row實際值。tr
演示（顯示actual id存儲為名稱的 (1, 2)）
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//Getting the actual table ID
var row = $(_this).parents('tr')[0];
//Data table row id
console.log(table.row(row).data()[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
演示（顯示表的實際索引 - 索引從 0 開始，具體取決于您有多少行）
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//get the closest of clicked edit button
var tr = $(_this).closest("tr");
//get the index of row
var rowindex = tr.index();
//Index of row
console.log(rowindex)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
精慕HU
TA貢獻(xiàn)1845條經(jīng)驗 獲得超8個贊
這是我的簡單回答：
var table = $('#table-values');
$('#table-values').on( 'click', 'tr', function(){
var id = this.id;
alert( 'Clicked row id '+id );
});
簡單的。:)
- 2 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消