数据没有被推送到数组

Question

我已经能够将JSON数据（本地文件）显示到我的表中的每一行中，以及检查数据的相应复选框时，我希望将这些所选值推入数组。最终目标是在 div 中显示数组，但直到我能够看到数组正在被填充。

JS sn-p:

($("#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>