Question

我已经能够在表的每一行中显示JSON数据（本地文件），并且当选中数据的相应复选框时，我想将这些选定的值压入数组。最终目标是在div中显示该数组，但是直到我看到该数组已被填充为止。

JS代码段：

($("#km-table-id tbody tr")).append($("<input />", {"type": "checkbox"}).addClass("checkbox-class"));

let table = $("#km-table-id").DataTable();
    let favesArr = [];

    $(".checkbox-class").on("click", "tr", function() {
      let data = table.row(this).data();
      for (var i = 0; i < favesArr.length; i++) {
        favesArr.push($(data).text());
        $("#myFave.hs-gc-header").append(favesArr[i]);
      }      
      console.log(data); // this was showing the selected data a short time ago, but not anymore  

    });

    console.log(favesArr); // only showing empty

Answer 1

首先，您的最后一行将始终打印一个空数组，因为您仅将其填充到事件处理程序中。

第二，您使用i < favesArr.length作为循环条件。 favesArr如果尚未填写代码的其他部分，则此处仍为空。因此，循环体永远不会执行。您可能想在这里data.length。

最后但并非最不重要的一点，您可能只想将data[i]而不是整个数组推入favesArray。

Answer 2

我建议您捕获是否已选中该复选框。您可以通过获取数据索引来检查该项是否已经在数组中。

不确定您的HTML是什么样的...

(function($) {
  $.fn.appendText = function(text) { return this.text(this.text() + text); };
  $.fn.appendHtml = function(html) { return this.html(this.html() + html); };
})(jQuery);

const $table = $('#km-table-id');

$table.find('tbody tr').append($("<input>", { type: 'checkbox', class : 'checkbox-class'}));

let table = $table.DataTable();
let favesArr = [];

$table.on('click', '.checkbox-class', function(e) {
  let data = table.row(this.parentNode).data(),
      checked = $(this).is(':checked'),
      dataIndex = favesArr.indexOf(data);
  if (checked) {
    if (dataIndex === -1) {
      favesArr.push(data); // Add item
    }
  } else {
    if (dataIndex > -1) {
      favesArr.splice(dataIndex, 1); // Remove item
    }
  }
  $('#myFave.hs-gc-header').appendHtml('>> ' + favesArr.map(x => x.join(', ')).join('; ') + '<br/>');
});

body {
  background: #666;
}
.table-wrapper {
  background: #fff;
  width: 80%;
  margin: 0 auto;
  margin-top: 1em;
  padding: 0.25em;
}

#myFave.hs-gc-header {
  background: #fff;
  width: 81%;
  margin: 0 auto;
  margin-top: 0.5em;
  height: 5em;
  overflow: scroll;
}

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<div class="table-wrapper">
  <table id="km-table-id">
    <thead>
      <tr>
        <th>A</th><th>B</th><th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3</td>
      </tr>
      <tr>
        <td>4</td><td>5</td><td>6</td>
      </tr>
      <tr>
        <td>7</td><td>8</td><td>9</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="myFave" class="hs-gc-header"></div>

数据没有被推送到阵列

JS代码段：

2 个答案: