javascript - 如果复选框为 false，则从数组中删除项目

Question

我正在使用一个脚本，该脚本根据正在检查的表行将项目添加到数组中。这工作得很好，但如果未选中该复选框，我需要一种从数组中删除项目的方法。我尝试了多种拼接方式，但似乎没有任何进展。如果有人可以帮助修改我的代码以从数组中删除项目，我将不胜感激。非常感谢

$(function() {

  info = [];

  $(document).on('click', '.rowChk', function () {

    if ($('.rowChk').is(':checked')) {
    $('#rowClk').show();

    var currentRows = $(this).closest("tr");
    var rackid = currentRows.find("td:eq(0)").html();
    //var rackidnumber = currentRows.find("td:eq(1)").html();
    var rackservice = currentRows.find("td:eq(2)").html();
    var rackactivity = currentRows.find("td:eq(3)").html();
    var rackdept = currentRows.find("td:eq(4)").html();
    var rackcompany = currentRows.find("td:eq(5)").html();
    var rackaddress = currentRows.find("td:eq(6)").html();
    var rackuser = currentRows.find("td:eq(7)").html();
    var rackitem = currentRows.find("td:eq(8)").html();
    var rackddate = currentRows.find("td:eq(9)").html();
    var rackdate = currentRows.find("td:eq(10)").html();

    data = {};

    data.id = rackid;
    //data.idnumber = rackidnumber;
    data.service = rackservice;
    data.activity = rackactivity;
    data.dept = rackdept;
    data.company = rackcompany;
    data.address = rackaddress;
    data.user = rackuser;
    data.item = rackitem;
    data.intakedate = rackdate;
    data.destroydate = rackddate;

    info.push(data);
    //console.log(data);
    } 
    else if ($('.rowChk').prop('checked', false)) {
       var index = info.indexOf($(this).val());
         if (index > -1) {
          info.splice(index, 1);
         }
          console.log("array=[" + info+"]");
         }
    else {
      info.length = 0;
      $('#rowClk').css('display','none');

    }

  });

});

$(function () {

  $(document).on('click', '#rowClk', function () {

    jsonString = JSON.stringify(info);
    //$("#rack").dialog("open");

    console.log(jsonString);
    //$("#rack").dialog("open");

  });
});

Answer 1

如果要根据行复选框的选定状态向数组添加或删除项目，则必须首先获取事件目标。

$(e.target).is(':checked')

如果要添加，只需将对象添加到列表中即可。如果你想删除它，你需要获取该行的id。

var recordId = $(e.target).closest('td').text();

然后你可以将其从数组中过滤出来。

info.filter(record => record.id != recordId);

演示

loadPlugins(); // Load jQuery plugins

var data = [
  { id : 1, idNumber : 1, service : 1, activity : 1, dept : 1, company : 1, address : 1, user : 1, item : 1, intakeDate : 1, destroyDate : 1 },
  { id : 2, idNumber : 2, service : 2, activity : 2, dept : 2, company : 2, address : 2, user : 2, item : 2, intakeDate : 2, destroyDate : 2 },
  { id : 3, idNumber : 3, service : 3, activity : 3, dept : 3, company : 3, address : 3, user : 3, item : 3, intakeDate : 3, destroyDate : 3 },
  { id : 4, idNumber : 4, service : 4, activity : 4, dept : 4, company : 4, address : 4, user : 4, item : 4, intakeDate : 4, destroyDate : 4 }
];

$(function() {
  var info = []; // Running list...
  $.tableFromJson(data).appendTo('body');

  $('table tbody tr td:first-child')
    .each((i, td) => $(td).prepend($('<input type="checkbox">').addClass('row-chk')));

  $(document).on('click', '.row-chk', function(e) {
    if ($(e.target).is(':checked')) {
      let currentRow = $(this).closest('tr');
      let data = {
        id : currentRow.find("td:eq(0)").text(),
        idNumber : currentRow.find("td:eq(1)").text(),
        service : currentRow.find("td:eq(2)").text(),
        activity : currentRow.find("td:eq(3)").text(),
        dept : currentRow.find("td:eq(4)").text(),
        company : currentRow.find("td:eq(5)").text(),
        address : currentRow.find("td:eq(6)").text(),
        user : currentRow.find("td:eq(7)").text(),
        item : currentRow.find("td:eq(8)").text(),
        intakeDate : currentRow.find("td:eq(9)").text(),
        destroyDate : currentRow.find("td:eq(10)").text()
      };
      info.push(data); // Add
    } else {
      let $tr = $(e.target).closest('tr');                   // Unused
      let rowIndex = $tr.index();                            // Unused
      let recordId = $(e.target).closest('td').text();
      removeAllFromArray(info, 'id', recordId);              // In-place removal
      //info = info.filter(record => record.id != recordId); // Remove (modifies)
    }
    
    var selectedRows = $(e.target).closest('table').getCheckedRowData();
    
    console.log(JSON.stringify(selectedRows)); // Live state from the table...
    console.log(JSON.stringify(info));         // Running list...
  });
});

// Defined as a plugin belowL $.fn.getCheckedRowData
function getCheckedRowData($table) {
  var headers = $table.find('thead th').map((row, th) => $(th).text()).toArray();
  return $table.find('tbody tr').reduce((records, tr, row) => {
    if ($(tr).find('input[type="checkbox"]').is(':checked')) {
      records.push($(tr).find('td').reduce((obj, cell, col) => {
        return Object.assign(obj, { [headers[col]] : $(cell).text() });
      }, {}));
    }
    return records;
  }, []);
}

function removeAllFromArray(arr, prop, val) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i][prop] === val) {
      arr.splice(i, 1);
    }
  }
}

function loadPlugins() {
  (function($) {
    $.reduce = function(arr, fnReduce, valueInitial) {
      if (Array.prototype.reduce) {
        return Array.prototype.reduce.call(arr, fnReduce, valueInitial);
      }
      $.each(arr, function(i, value) {
        valueInitial = fnReduce.call(null, valueInitial, value, i, arr);
      });
      return valueInitial;
    };
    $.fn.reduce = function(fnReduce, valueInitial) {
      return $.reduce(this, fnReduce, valueInitial);
    };
    $.fn.renderTable = function(data, options) {
      options = options || {};
      let ignoreCase = options.ignoreCase, fields = Object.keys(data[0]);
      return this.renderHeaders(fields).renderRows(fields, data);
    };
    $.fn.renderHeaders = function(fields) {
      return this.append($.renderHeaders(fields));
    }
    $.fn.renderRows = function(fields, data) {
      return this.append($.renderRows(fields, data));
    };
    $.tableFromJson = function(data, options) {
      return $('<table>').renderTable(data, options)
        .toggleClass('stylized', (options || {}).stylized);
    };
    $.renderHeaders = function(fields) {
      return $('<thead>').append($('<tr>').append(fields
        .map(field => $('<th>')
          .append($('<div>').text(field)))));
    };
    $.renderRows = function(fields, data) {
      return $('<tbody>').append(data
        .map((rec, row) => $('<tr>').append(fields
          .map((field, col) => $('<td>').text(rec[field]).data('field-name', field)))));
    };
    $.fn.getCheckedRowData = function() {
      return getCheckedRowData(this);
    };
  })(jQuery);
}

body {
  padding: 0.25em;
}

h1 {
  font-weight: bold;
  margin-top: 0.75em;
  margin-bottom: 0.33em;
}

table.stylized {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 12px;
  text-align: left;
  border-collapse: collapse;
  margin: 4px;
  width: 600px;
}

table.stylized thead th {
  text-transform: capitalize;
  font-size: 13px;
  color: #039;
  background: #b9c9fe;
  padding: 6px;
  cursor: pointer;
}

table.stylized thead th input {
  background: #f2f5ff;
  color: #039;
  font-size: smaller;
}

table.stylized tbody tr:nth-child(odd) {
  background: #f2f5ff;
}

table.stylized tbody tr:nth-child(even) {
  background: #e8edff;
}

table.stylized tbody td {
  border-top: 1px solid #fff;
  color: #669;
  padding: 6px;
}

table.stylized tbody tr:hover td {
  background: #d0dafd;
}

table.stylized tbody tr td:first-child {
  display: inline-block;
  width: 3em !important;
}

table.stylized tbody tr td:first-child input {
  margin-right: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>