get the values of all cells in table row using jquery

Question

I would like to get the values in each cell in table row which is selected using a checkbox. Scenario: Whenever user clicks the show table button, my page is dynamically loaded with some data from tables, which has columns like checkbox, Item name, Item code, Quantity, Rejected and Accepted. Now I want to get the values of selected rows when the user clicks the button called "save".

<script type="text/javascript">
$(document).ready(function() {
   $("#tablediv").hide();
   $("#showTable").click(function(event){
      $.post('PopulateTable',{grn : $('#grn').val()},function(responseJson) {
         if(responseJson!=null){
             $("#itemtable").find("tr:gt(0)").remove();
            	var table1 = $("#itemtable");
	         $.each(responseJson, function(key,value) { 
	            var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
	               rowNew.children().eq(0).html('<input type="checkbox" />');
	               rowNew.children().eq(1).text(value['itemname']); 
	               rowNew.children().eq(2).text(value['itemcode']); 
	               rowNew.children().eq(3).text(value['supplier']); 
	               rowNew.children().eq(4).text(value['receivedqty']); 
	               rowNew.children().eq(5).html('<input type="text" class="tb2"/>');
	               rowNew.children().eq(6).html('<input type="text" class="tb2"/>');
	               rowNew.children().eq(7).html('<input type="text" class="tb2"/>');
	               rowNew.appendTo(table1);
	        });                                                                                 
          }
      });
      $("#tablediv").show();          
   });      
});

<br/>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center"> 
    <tr>
    	<td><input type="checkbox" /></td>
        <th scope="col">Item name</th> 
        <th scope="col">Item code</th> 
        <th scope="col">Supplier</th> 
        <th scope="col">Received qty</th>   
        <th scope="col">Accepted qty</th>   
        <th scope="col">Rejected qty</th>      
        <th scope="col">Remarks</th>             
    </tr> 
</table>
</div>

$(document).ready(function(){
	// code to read selected table row cell data (values).
    $("#itemtable").on('click','.btnSelect',function(){
         // get the current row
        alert("i am inside select");
     // get the current row
        var currentRow=$(this).closest("tr"); 
        
        var col1=currentRow.find("td:eq(0)").text(); // get SI no from checkbox
        var col2=currentRow.find("td:eq(1)").text(); // get item name
        var col3=currentRow.find("td:eq(2)").text(); // get item code
        var col4=currentRow.find("td:eq(3)").text(); // get supplier
        var col5=currentRow.find("td:eq(4)").text(); // get received qty
        var col6=currentRow.find("td:eq(5)").text(); // get accepted qty
        var col7=currentRow.find("td:eq(6)").text(); // get rejected qty
        var col8=currentRow.find("td:eq(7)").text(); // get remarks
        
        var data=col1+"\n"+col2+"\n"+col3+"\n"+col4+"\n"+col5+"\n"+col6+"\n"+col7+"\n"+col8;
        
        alert(data);
    });
});

<!--btnSelect is class of checkbox -->

Answer 1

I come across below exaple to get all value of table cell of checked row.

$('.chk').change(function () { 
  if($(this).is(':checked'))
  {
    $(this).closest('tr').find('td').each(
    function (i) {
      console.log($(this).text());
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tablediv">
<table border="1" id="itemtable" align="center"> 
    <tr>
    	<th>check</th>
        <th scope="col">Item name</th>
        <th scope="col">Item code</th>
        <th scope="col">Supplier</th>
        <th scope="col">Received qty</th>
        <th scope="col">Accepted qty</th>   
        <th scope="col">Rejected qty</th>      
        <th scope="col">Remarks</th>             
    </tr> 
    <tr>
            <td><input type="checkbox" class="chk" ></td>
        <td>Pencil</td>
        <td>101</td>
        <td>Supplier</td>
        <td>10</td>
        <td>5</td>   
        <td>5</td>      
        <td>Remarks</td>             
    </tr>
     <tr>
            <td><input type="checkbox" class="chk" ></td>
        <td>Pen</td>
        <td>102</td>
        <td>Supplier</td>
        <td>25</td>
        <td>20</td>   
        <td>5</td>      
        <td>Remarks</td>             
    </tr>
</table>
</div>

Answer 2

First give "name" to your checkbox, such as :

<input type="checkbox" name="case[]" />

JS code:

 var values = new Array();
$("#saveButton").click(function(){

       $.each($("input[name='case[]']:checked"), function() {
           var data = $(this).parents('tr:eq(0)');
           values.push({ 'Item name':$(data).find('td:eq(1)').text(), 'Item code':$(data).find('td:eq(2)').text() , 'Supplier':$(data).find('td:eq(3)').text()});             
       });

       console.log(JSON.stringify(values));
 });

Please check out the EXAMPLE