在破折号DataTable上启用对特定行的编辑,可以通过以下步骤实现:
以下是一个示例代码,演示如何在破折号DataTable上启用对特定行的编辑:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable();
// 添加编辑状态列
table.columnDefs.push({
targets: -1,
data: null,
defaultContent: '<button class="save-btn">Save</button>'
});
// 监听编辑按钮点击事件
$('#example').on('click', '.edit-btn', function() {
var row = $(this).closest('tr');
var rowData = table.row(row).data();
// 设置编辑状态为true
rowData[rowData.length - 1] = true;
// 更新行数据
table.row(row).data(rowData).draw();
});
// 监听保存按钮点击事件
$('#example').on('click', '.save-btn', function() {
var row = $(this).closest('tr');
var rowData = table.row(row).data();
// 保存编辑后的数据
var name = row.find('td:eq(0) input').val();
var email = row.find('td:eq(1) input').val();
rowData[0] = name;
rowData[1] = email;
rowData[rowData.length - 1] = false;
// 更新行数据
table.row(row).data(rowData).draw();
});
});
</script>
</body>
</html>
在上述示例代码中,我们使用了破折号DataTable库来创建一个可编辑的表格。每一行都有一个编辑按钮,点击编辑按钮后,该行的数据将变为可编辑状态。保存按钮用于保存编辑后的数据。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云