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

Question

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
});

use data attribute ? developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… ? linked ref to a full json information.... — Mister Jojo
– Mister Jojo, Commented Apr 26, 2021 at 4:07
You can also add json information directly on any DOM elements — Mister Jojo
– Mister Jojo, Commented Apr 26, 2021 at 4:13

Swati · Accepted Answer · 2021-04-26 10:07:37Z

1

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>

edited Apr 26, 2021 at 10:07

answered Apr 26, 2021 at 6:21

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cheknov Over a year ago

It works but it's setting everything to strings. For example the arrays would become like: ("1290", "chr10", "73498294", "73498294", "C", "G", "exonic", "CDH23", "DM", "CM127233", "DFNB12")

Mister Jojo · Accepted Answer · 2021-04-26 04:55:13Z

By using data attribute for linking ref to a full json information....

const parentDiv = document.querySelector('#parent_div')

const info = 
  [ [ 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' ]
  ]

parentDiv.onclick = ({target}) =>
  {
  if (!target.matches('div.infoDiv')) return

  console.clear()
  console.log('info =',...info[target.dataset.ref])
  }

.infoDiv { margin:.5em; cursor:pointer; }
.infoDiv:hover { background-color: greenyellow; }

<div id="parent_div">
  <div class="infoDiv" data-ref="0">click me 0</div>
  <div class="infoDiv" data-ref="1">click me 1</div>
  <div class="infoDiv" data-ref="2">click me 2</div>
  <div class="infoDiv" data-ref="3">click me 3</div>
</div>

You can also add json information directly on any DOM elements

const parentDiv = document.querySelector('#parent_div')

const info = 
  [ [ 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' ]
  ]

info.forEach((el,i) =>
  {
  let div = document.createElement('div')
  div.className   = 'infoDiv'
  div.textContent = `click me ${i}`  
  div.info        = el
  parentDiv.appendChild(div) 
  })
parentDiv.onclick = ({target}) =>
  {
  if (!target.matches('div.infoDiv')) return
  console.clear()
  console.log('info =',...target.info)
  }

.infoDiv { margin:.5em; cursor:pointer; }
.infoDiv:hover { background-color: greenyellow; }

<div id="parent_div"></div>

Thanks for your answer and for the time you have dedicated to it, but it is not what I need. In your answer, you are defining some constants in JavaScript, the truth is that I need to pass that data from each selected gene_variant to JavaScript. I can't hardcode it. In your answer I don't see how I can send the data from gene_variant to JavaScript.

Aditya Padhi · Accepted Answer · 2021-04-26 05:42:13Z

0

When you click the checkbox for each row then just store the index of the clicked row in an array.

When you click the #show-selected button then you can refer back to the main data store and fetch the data associated with that metric. In this way your actual datasource will be the single point of truth and you don't have to maintain duplicate copies in the selected_list & the main data source

answered Apr 26, 2021 at 5:42

Aditya Padhi

113 bronze badges

2 Comments

Cheknov Over a year ago

I think I understand what you mean, could you provide some illustrative code?

Aditya Padhi Over a year ago

@Cheknov here is a minimal example. You can see the selected items in the console:- stackblitz.com/edit/js-nncqea?file=index.js

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related