javascript - 将已选中复选框的表行提取到对象数组中

Question

我正在尝试将特定对象保存在具有“选中”复选框的数组中。我想创建新数组，这样我只能使用后者。

如何使用 jquery 做到这一点？

'use strict';

class event {
  constructor(jQuery) {
    this.$ = jQuery;
  }

  getEvents(eventKey) {
    let aEvents = [{
        eventName: 'ABDCCC',
        // true = checked
        status: true
      },
      {
        eventName: 'ACC',
        status: true
      }
    ];
    return aEvents;

    /**
     * Update
     * @param {array} [aEvents]
     */
    setEvents = function(aEvents) {
      // Put them on a table
      var table = this.$('#eventsTable');
      table.find('tbody tr').remove();
      for (var i = 0; i < aEvents.length; i++) {
        let event = aEvents[i];
        table.find('tbody').append(`
        <tr>
          <td>
            ${event.eventName}
          </td>
          <td>
          <div id="check-list" class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" ${event.status ? 'checked' : ''} id="customSwitch${i}"/>
            <label class="custom-control-label" for="customSwitch${i}"></label>
          </div>
          </td>
        </tr>
      `);
      }
    }
  }

我想要得到这个结果

• 您可以查看您喜欢的事件(已完成)
• 当点击按钮(例如“保存此事件”)时，只有选中的事件才会保存在新的对象数组中，与 getEvents() 中的事件相同

Answer 1

按照惯例，您需要在<td>内将一些 anchor 传递给您想要的属性名称。 HTML 属性(例如，prop 属性)。如果您不希望对属性名称进行硬编码(这不太灵活)。

接下来，您只需选择 <tr>具有 ( .has("input:checked") ) 选中复选框的节点。

这样，您就可以迭代选定的行，首先转动 ( :lt() ) <td>节点，将目标数据包含到对象属性中:

$('#savebtn').on('click', () => {
   const selectedRows = [...$('table tbody tr:has("input:checked")')]
      .map(tr => 
        [...$(tr).find('td:lt(2)')]
          .reduce((res,td) => (res[$(td).attr('prop')]=$(td).text(), res),{}))
   console.log(selectedRows)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Event name</th><th>Visitors qty</th><th>visited</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td prop="eventname">Christmass Eve Party</td><td prop="qty">500</td><td><input type="checkbox"></input>
    </tr>
    <tr>
      <td prop="eventname">Thanksgivin Day</td><td prop="qty">300</td><td><input type="checkbox"></input>
    </tr>
    <tr>
      <td prop="eventname">Independence Day</td><td prop="qty">600</td><td><input type="checkbox"></input>
    </tr>
  </tbody>
</table>
<button id="savebtn">Save</button>