checked rows of table to array th as array index in jquery

Question

I am trying to push the checked row of HTML table only to array using jQuery.I need to have array index as the table header and value as the shell value of the checked column shell of the respective head.

I have HTML table as:

<table class="table table-bordered" id="checkTable">
          <thead>
            <th style="width:20px;"><input type="checkbox" name="headercheck" id="checkAll"></th>
            <th>Programming Languages</th>
            <th>Popularity</th>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>Java</td>
              <td>62%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>Python</td>
              <td>46%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>JavaScript</td>
              <td>38%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>C++</td>
              <td>31%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>C#</td>
              <td>27%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>PHP</td>
              <td>14%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>Pearl</td>
              <td>14%</td>
            </tr>
          </tbody>
        </table>
        <button id='pushToArray'>Push To Array</button>

Now I need to push the selected rows of the table with the index value as the table head of the respective column.

$('div#tableContainer').find('button#pushToArray').on('click', function(){
        var array = new Array();
        var headers = new Array();
        table.find('th').each(function(index, item) {
            if(index == 0)
            {
                return true;
            }
            else
            {
                headers[index] = $(item).html();
            }
        });

            var valueList = [];
        table.find('tbody tr').each(function() {
            $(this).find('input.table-checkbox:checked').each(function(){
                var values = [];
                $(this).closest('td').siblings('td').each(function(index, item){
                    values[headers[index]] = $(item).html();
                });
                valueList.push(values);
            });
        });
        console.log(valueList);
    });

I build headers successfully but while indexing i am getting my array as

[…]
0: []
"Programming Languages": "14%"
length: 0
undefined: "PHP"
__proto__: Array []
length: 1
__proto__: Array []

what can be the best way for getting things right in the way i wanted it to be.

$('div#tableContainer').find('button#pushToArray').on('click', function() {
  var array = new Array();
  var headers = new Array();
  table.find('th').each(function(index, item) {
    if (index == 0) {
      return true;
    } else {
      headers[index] = $(item).html();
    }
  });

  var valueList = [];
  table.find('tbody tr').each(function() {
    $(this).find('input.table-checkbox:checked').each(function() {
      var values = [];
      $(this).closest('td').siblings('td').each(function(index, item) {
        values[headers[index]] = $(item).html();
      });
      valueList.push(values);
    });
  });
  console.log(valueList);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="checkTable">
  <thead>
    <th style="width:20px;"><input type="checkbox" name="headercheck" id="checkAll"></th>
    <th>Programming Languages</th>
    <th>Popularity</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Java</td>
      <td>62%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Python</td>
      <td>46%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>JavaScript</td>
      <td>38%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C++</td>
      <td>31%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C#</td>
      <td>27%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>PHP</td>
      <td>14%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Pearl</td>
      <td>14%</td>
    </tr>
  </tbody>
</table>
<button id='pushToArray'>Push To Array</button>

where is this 'div#tableContainer' ,table variable?? please post minimal reproducible example — Abdul Hameed
– Abdul Hameed, Commented Apr 17, 2018 at 6:01
I just want an array with table header as index and its value must be each checked row values only. — Alesh
– Alesh, Commented Apr 17, 2018 at 6:06

Eddie · Accepted Answer · 2018-04-17 06:58:02Z

4

If you want to get the Programming Languages checked, you can use :checked selector to get all checked checkbox. The map to get the text text of the next <td>

$('#pushToArray').click(function() {
	
//Get all headers that dont contain checkAll checkbox
var headers = $("#checkTable thead th").filter(function(){
    return !$(this).find('#checkAll').length;
}).map(function(){
    return $(this).text().trim();
}).get();


//Loop thru the checked checkboxes
var arr = $('#checkTable .table-checkbox:checked').map(function(){ 
    var obj = {};
			
    $(this).parent().siblings().each(function(i){
          obj[ headers[i] ] = $(this).text().trim();
    })
			 
    return obj;
}).get();

console.log(arr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="checkTable">
  <thead>
    <th style="width:20px;"><input type="checkbox" name="headercheck" id="checkAll"></th>
    <th>Programming Languages</th>
    <th>Popularity</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Java</td>
      <td>62%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Python</td>
      <td>46%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>JavaScript</td>
      <td>38%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C++</td>
      <td>31%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C#</td>
      <td>27%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>PHP</td>
      <td>14%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Pearl</td>
      <td>14%</td>
    </tr>
  </tbody>
</table>
<button id='pushToArray'>Push To Array</button>

edited Apr 17, 2018 at 6:58

answered Apr 17, 2018 at 6:07

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

6 Comments

Alesh Over a year ago

but i need table head as index

Alesh Over a year ago

[…] 0: […] "Programming Languages": "Python" "Popularity": "46%"

Alesh Over a year ago

yeah but it cant be static with the columns

Eddie Over a year ago

You mean, the column names are dynamic? Are the positions dynamic as well?

Alesh Over a year ago

The way you did gives only two column value but what if i have more than 2 columns in my table

|

Alesh · Accepted Answer · 2018-04-17 06:57:06Z

I used loop to to push the headers in array and used another loop to get table body values ignoring the checkbox as follows:

$('div#tableContainer').find('button#pushToArray').on('click', function(){
    console.log("Cool");
    var array = [];
    var headers = [];
    $('#checkTable th').each(function(index, item) {
        if(index == 0)
            {
                return true;
            }
            else
            {
                headers[index] = $(item).html();
            }
    });
    $('#checkTable tr').has('td input.table-checkbox:checked').each(function() {
        var arrayItem = {};
        $('td', $(this)).each(function(index, item) {
            if(index == 0)
            {
                return true;
            }
            else
            {
                arrayItem[headers[index]] = $(item).html();
            }
        });
        array.push(arrayItem);
    });
    console.log(array);
});

Collectives™ on Stack Overflow

checked rows of table to array th as array index in jquery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related