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

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>

2 answers

  • answered 2018-04-17 05:55 Eddie

    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>

  • answered 2018-04-17 05:55 Alesh

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