Удалить элемент из массива, если флажок ложен

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')

Если вы добавляете, вы просто добавляете объектк списку.Если вы хотите удалить его, вам нужно получить идентификатор строки.

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>