How to store in a JavaScript variable the selected rows in a table

Let’s say we have a table like this:

<table>
    <thead>
      <tr>
          <th class="active">
              <input type="checkbox" class="select-all checkbox" name="select-all" />
          </th>
          <th>A</th>
          <th>B</th>
      </tr>
    </thead>
    <tbody>
      {% for gene_variant in gene_variant_results %}
      <tr>
          <td class="active">
              <input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item"/>
          </td>
          <td>{{ gene_variant.67 }}</td>
          <td> {{ gene_variant.72 }}</td>
      </tr>
      {% endfor %}
    </tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button type="submit" id="show-selected" class="btn btn-primary">Show selected</button>

And let’s say that gene_variant_results has for example, 4 results. Each result corresponds to a row (each row has about 100 columns, in this example I only put 11 for illustrative purposes):

(1290, 'chr10', '73498294', '73498294', 'C', 'G', 'exonic', 'CDH23', 'DM', 'CM127233', 'DFNB12)
(1291, 'chr11', '73498295', '73498295', 'D', 'H', 'exonic', 'CDH24', 'DM', 'CM127234', 'DFNB13)
(1292, 'chr12', '73498296', '73498296', 'E', 'I', 'exonic', 'CDH25', 'DM', 'CM127235', 'DFNB14)
(1293, 'chr13', '73498297', '73498297', 'F', 'J', 'exonic', 'CDH26', 'DM', 'CM127236', 'DFNB15)

For example, if I click on the first two checkboxes and then click on the #show-selected button, I would like to store in a JavaScript variable the values of those selected rows. (The full gene_variant content, not just the selected <td> values)

Some illustrative semi pseudo-code of what I want:

$( "#show-selected" ).click(function() {
    var selected_checkboxes = //get the full content of each selected row and store it in an array of strings or any other data structure
});

Answer

Whenever your show selected button is clicked first loop through checked checkboxes then use $(this).closest("tr") to get closest tr then loop through whole trs childrens(td) and push value inside some array using .push().

Demo Code :

$("button#show-selected").click(function() {
  var outer_array = []
  //loop through checked checkboxes
  $("tbody input[type=checkbox]:checked").each(function(index, item) {
    var inner_array = []
    var selector = $(this).closest("tr") //get closest tr
    //loop through trs td not first one
    selector.find("td:not(:first)").each(function() {
      inner_array.push($.isNumeric($(this).text().trim()) ? parseInt($(this).text().trim()) : $(this).text().trim()) //push in inner array
    })
    outer_array.push(inner_array) //push in outer array
  })
  console.log(outer_array)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="active">
        <input type="checkbox" class="select-all checkbox" name="select-all" />
      </th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="active">
        <input type="checkbox" class="select-item checkbox" name="select-item" />
      </td>
      <td>1</td>
      <td> 2</td>
      <td> abcdsre</td>
    </tr>
    <tr>
      <td class="active">
        <input type="checkbox" class="select-item checkbox" name="select-item" />
      </td>
      <td>12</td>
      <td> 22</td>
      <td> abcde</td>
    </tr>

  </tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button type="submit" id="show-selected" class="btn btn-primary">Show selected</button>

Advertisement

Answer