以下是一个带有复选框和保存按钮的Bootstrap表格代码示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Table with Checkboxes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Table with Checkboxes</h1>
<table class="table">
<thead>
<tr>
<th></th>
<th>行号</th>
<th>数据</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>数据1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>数据2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>数据3</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" onclick="saveSelection()">保存</button>
</div>
<script>
function saveSelection() {
var selectedRows = [];
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
checkboxes.forEach(function(checkbox) {
var row = checkbox.parentNode.parentNode;
var rowData = {
rowNumber: row.cells[1].textContent,
data: row.cells[2].textContent
};
selectedRows.push(rowData);
});
console.log(selectedRows);
// 在这里可以进行保存选中行的操作,例如发送到服务器或进行其他处理
}
</script>
</body>
</html>
这段代码创建了一个带有复选框和保存按钮的Bootstrap表格。用户可以通过勾选复选框来选择行,然后点击保存按钮将选中的行保存起来。保存操作通过JavaScript函数saveSelection()
实现。
在saveSelection()
函数中,首先获取所有被选中的复选框元素,然后遍历每个被选中的复选框,找到其所在的行,并提取行号和数据。最后,将提取的行数据存储在selectedRows
数组中。你可以根据需要修改保存选中行的操作,例如将数据发送到服务器或进行其他处理。
请注意,这只是一个简单的示例代码,你可以根据自己的需求进行修改和扩展。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云