Question

我有一个使用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>

Answer 1

修改

由于OP无法从原始表中删除添加的行，所以我不得不更改示例以加载一些数据并使用它们希望您能够从这里开始向前推进，主要的是要通过使用unique指定表属性来选择列作为data-unique-id="column_name"列，请确保您选择的列具有来自数据库或任何自定义计数器的唯一值id列将执行该工作，然后使用bootstrapTable提供的removeByUniqueId方法并将其传递给您要删除的列的id，您应该查看我在回答
您可以使用checkboxes的引导事件，即check.bs.table。

当用户检查行时，它会触发，参数包含：



行：与单击的行对应的记录。

$ element：检查了DOM元素。


我正在创建一个将行复制到表中的最小示例，以便您可以启动其余的事情，例如从bootstraptable禁用复制的行。

同样，如果您要取消选中该行，则需要使用onUncheck即uncheck.bs.table。请参阅所有Events以获取Bootstrap表。

请参阅下面的全屏中的演示，了解最少的选项。希望它可以帮助你。

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>  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>  <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>

如何通过复选框选中从BootstrapTable到另一个Html表的行？

1 个答案: