Извлечение строк таблицы с установленными флажками в массив объектов

Question

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

Как я могу это сделать, используя 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> 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>

Answer 2

Вот решение:

let checkedEvents = [];
$('#eventsTable').find('tbody tr').each(function(index) {
  if( $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked') ) {
    checkedEvents.push({
      eventName: $(this).find("td:first-child").text().trim(),
      status: $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked'),
    });
  }
});
// Do something with checkedEvents

Если вы собираетесь делать это с большим количеством меток / ячеек таблицы в строке, добавление к ним идентификатора, класса или другого свойства может оказаться полезным для нацеливания. Если вы сделаете это последовательно, вы можете даже использовать al oop для установки всех атрибутов объекта.

Answer 3

Вот очень простой способ выполнить то, что вы хотите:

var arr = [];
$("#ok").click(function(){
 $("#results").html("");
 arr = [];
 $('input.events[type="checkbox"]').each(function(){
  if($(this).is(":checked")){
   var evName = $(this).attr("id");
   arr.push($('label[for="'+evName+'"]').text()); 
   $("#results").append("<p>"+$('label[for="'+evName+'"]').text()+"</p>");
  } 
 });
});

table{
  width:100%;
}

table td{
  display:block;
}

#results p{
  display:block;
}

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

<table>
 <tbody>
   <tr>
     <td><input type="checkbox" class="events" id="ev1" /> <label for="ev1">Event One</label> </td>
     <td><input type="checkbox" class="events" id="ev2" /> <label for="ev2">Event Two</label> </td>
     <td><input type="checkbox" class="events" id="ev3" /> <label for="ev3">Event Three</label> </td>
     <td><input type="checkbox" class="events" id="ev4" /> <label for="ev4">Event Four</label> </td>
     <td><input type="checkbox" class="events" id="ev5" /> <label for="ev5">Event Five</label> </td>
     <td> <button id="ok">OK</button> </td>
   </tr>
 </tbody>
</table>

<h5>Selected events :</h5>
<div id="results"></div>