How to pass the selected checkbox rows to a function

Question

I have to pass the selected rows to a function( ). From the below code, I am able to get the value of selected checkbox but could not get the entire row. Please help me on how to get the entire selected rows and pass those rows to a function.

my html code:

    <div id ="div_table">
    <table id="myTable">
       <tr>
         <th>SELECT</th>
         <th>BANKID</th>
         <th>EFFECTIVE SAVE DATE</th>
         <th>SAVE MONTH</th>
         <th>MONTH OF SUBMISSION</th>
         <th>PILLAR</th>
         <th>LEVER</th>
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1000" id="1000"></td> 
         <td id="bank" >100000</td>
         <td id="edate">10-02-2009</td>
         <td id="month">Jan</td>
         <td id="subMonth"><input type="text" id="subMonth"></td>
         <td id="pillar"><input type="text" id="pillar1"></td>
         <td id="lever"><input type="text" id="lever1"></td>
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1001" id="1001"></td> 
         <td id="bank1" >100001</td>
         <td id="edate1">12-12-2010</td>
         <td id="month1">Feb</td>
         <td id="subMonth1"><input type="text" id="subMonth2"></td>
         <td id="pillar1"><input type="text" id="pillar2"></td>
         <td id="lever1"><input type="text" id="lever12"></td>  
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1002" id="1002"></td> 
         <td id="bank2" >100002</td>
         <td id="edate2">18-02-2018</td>
         <td id="month2">Apr</td>
         <td id="subMonth2"><input type="text" id="subMonth3"></td>
         <td id="pillar2"><input type="text" id="pillar3"></td>
         <td id="lever2"><input type="text" id="lever13"></td>  
       </tr>
     </table>
     </div>

My jQuery Code:

        $('#div_table').click(function() {
          var result = []
          $('input:checkbox:checked', tableControl).each(function() {
            result.push($(this).parent().next().text());
          });
          alert(result);
        });

The selected rows should be passed to the below function:I have to use these rows one by one and store.

    function invokeAllEligibleSaves(result){
       alert(result)
    }

It will be very much useful for me If i get a working code. Thanks in advance.

Answer 1

One way to achieve that is like this:

First : get a reference to the input element that triggered the function. From this element, you can reach the .closest() parent that has the tag <tr>.

Second: This can then be queried for all of its <td> .children() and each child will either have .text() or .html() to report back. I think in your case, you are interested in the text part.

Third: You will need to push all .text() values in a separate array, that will be your row. Then push that row into another array result. So your result will be an array of arrays.

$('#div_table').click(function() {
  var result = []   // create an empty array for all rows
  $('input:checkbox:checked').each(function() {
    var row = [];   // create an empty array for the current row
    
    //loop through all <td> elements in that row
    $(this).closest('tr').children('td').each(function(){
      // add .text() or .html() if you like
      row.push($(this).text());
    });
    // now push that row to the result array
    result.push(row);
  });
  alert(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="div_table">
  <table id="myTable">
    <tr>
      <th>SELECT</th>
      <th>BANKID</th>
      <th>EFFECTIVE SAVE DATE</th>
      <th>SAVE MONTH</th>
      <th>MONTH OF SUBMISSION</th>
      <th>PILLAR</th>
      <th>LEVER</th>
    </tr>
    <tr>
      <td><input type='checkbox' name='chck' value="1000" id="1000"></td>
      <td id="bank">100000</td>
      <td id="edate">10-02-2009</td>
      <td id="month">Jan</td>
      <td id="subMonth"><input type="text" id="subMonth"></td>
      <td id="pillar"><input type="text" id="pillar1"></td>
      <td id="lever"><input type="text" id="lever1"></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='chck' value="1001" id="1001"></td>
      <td id="bank1">100001</td>
      <td id="edate1">12-12-2010</td>
      <td id="month1">Feb</td>
      <td id="subMonth1"><input type="text" id="subMonth2"></td>
      <td id="pillar1"><input type="text" id="pillar2"></td>
      <td id="lever1"><input type="text" id="lever12"></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='chck' value="1002" id="1002"></td>
      <td id="bank2">100002</td>
      <td id="edate2">18-02-2018</td>
      <td id="month2">Apr</td>
      <td id="subMonth2"><input type="text" id="subMonth3"></td>
      <td id="pillar2"><input type="text" id="pillar3"></td>
      <td id="lever2"><input type="text" id="lever13"></td>
    </tr>
  </table>
</div>