我有一个使用 bootstrap 创建的 HTML 表，它从 SQL 数据库中获取数据。
我已将复选框添加到该表的第一列，但我想添加一个表单来提交它并创建一个新表，其中只有复选框选中的行。这些行应该从原始表中删除。我想我需要一些 jQuery 代码来遍历表格，但我不知道如何创建仅包含选定行的新表格。
提前致谢。
<html>
<head>
<title> Dashboard</title>
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
<link type="text/css" href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table id="table" data-show-columns="true" data-height="460">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'list-leads.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 2,
columns: [{
data: '',
title: '',
checkbox: true,
}, {
field: 'num',
title: '#',
sortable: true,
}, {
field: 'registrant',
title: 'registrant',
sortable: true,
}, ],
});
</script>
</body>
</html>
最佳答案
编辑
由于 OP 无法自己从原始表中删除添加的行，所以我不得不更改示例以加载一些数据并使用它们希望您能够从这里开始，主要的是通过使用 data-unique-id="column_name" 在表属性中指定来选择列作为 unique 列，确保您选择的列具有唯一值来自数据库或任何自定义计数器的 id 列将完成这项工作，然后使用 bootstrapTable 提供的 removeByUniqueId 方法并将您要删除的列的 id 传递给它，您应该查看我在下面的链接中提供的事件图表以回答
您可以使用 checkboxes 的引导事件，即 check.bs.table。
当用户检查一行时触发，参数包含:
- row: the record corresponding to the clicked row.
- $element: the DOM element checked.
我正在创建一个最小的示例来将行复制到表中，这样您就可以快速开始其他操作，例如从 bootstraptable 中禁用复制的行。
同样，如果您想删除未选中的行，则需要使用 onUncheck 即 uncheck.bs.table。查看全部 Events用于引导表。
请参阅下面的全屏 演示，了解最少的选项。希望它能帮助你。
var data = [{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
},
{
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog"
},
{
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}
];
$table = $('#table').bootstrapTable({
data: data
});
$('#table').on('check.bs.table', function(e, row, $el) {
$table.bootstrapTable('removeByUniqueId', row.forks_count);
$('#duplicate > tbody:last-child').append('<tr id="' + $el.closest('tr').data('index') + '"><td >' + row.name + '</td><td>' + row.stargazers_count + '</td><td>' + row.forks_count + '</td></tr>');
});
$('#table').on('uncheck.bs.table', function(e, row, $el) {
$('#duplicate > tbody tr#' + $el.closest('tr').data('index')).remove();
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<div class="row">
<div class="col-sm-6">
<table id="table" data-unique-id="forks_count">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
</tr>
</thead>
</table>
</div>
<div class="col-sm-6">
<table id="duplicate" class="table table-striped">
<thead>
<tr>
<th>
Name
</th>
<th>
Star
</th>
<th>
Forks
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>关于javascript - 通过复选框选中时如何将行从 BootstrapTable 复制到另一个 Html 表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48027652/