Question

我有一张简单的表格：

<div class="col-md-12 top-buffer">
    <table id="table-data" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th></th>
            <th>Code</th>
            <th>Name</th>
            <th>Postal Code</th>
            <th>City</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

我使用以下方法实现了多行的选择：

var rows_data = [];
$(document).ready(function () {
    $('#table-data tbody').on('click', 'input[type="checkbox"]', function(e) {
        var $row = $(this).closest('tr');
        if(this.checked){
            $row.addClass('selected');
        } else {
            $row.removeClass('selected');
        }

        e.stopPropagation();
    });

    $('#table-data').on('click', 'tbody td, thead th:first-child', function(e) {
        $(this).parent().find('input[type="checkbox"]').trigger('click');
    });
}

当我选择/取消选择一个时，我想要做的是在rows_data []中添加/删除行的数据。

如何访问行的数据（以及索引）？

谢谢！

Answer 1

我发现一些非常简单的东西，现在是：

var rows_selected = [];
var table = $('#table-data').DataTable();
$(document).ready(function () {
    $('#table-data tbody').on('click', 'input[type="checkbox"]', function(e) {
        var $row = $(this).closest('tr');

        var data = table.row($row).data();
        var key = data[1];

        if(this.checked){
            $row.addClass('selected');
            rows_selected[key] = data;
        } else {
            $row.removeClass('selected');
            delete rows_selected[key];
        }

        e.stopPropagation();
    });
}

Answer 2

或者，您可以使用少量代码清除并重建rows_data数组：

var rows_data = [];

$(function() {
  var table = $('#table-data').DataTable();
  $('#table-data tbody').on('click', 'input[type="checkbox"]', function(e) {

    var $row = $(this).closest('tr');
    if (this.checked) {
      $row.addClass('selected');
    } else {
      $row.removeClass('selected');
    }

    rows_data = [];

    $('#table-data tr.selected').each(function() {
      rows_data.push(table.row($(this)).data());
    });

    e.stopPropagation();
  });

  $('#table-data').on('click', 'tbody td, thead th:first-child', function(e) {
    $(this).parent().find('input[type="checkbox"]').trigger('click');
  });
});

如何从数据表中的所有选定行获取数据？

2 个答案: