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 -->

Chirag Suthar · Accepted Answer · 2019-03-04 04:30:00Z

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>

Nayana_Das · Accepted Answer · 2017-02-27 05:44:27Z

0

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

edited Feb 27, 2017 at 5:44

answered Feb 27, 2017 at 4:50

Nayana_Das

1,8154 gold badges24 silver badges50 bronze badges

4 Comments

Jsel Over a year ago

as u mentioned i have added name for checkbox, i am struck with getting values. Where u have mentioned table name/id to get the values of specific selected table row

Nayana_Das Over a year ago

is there only table heading, no other rows? Have you check out the example?

Jsel Over a year ago

<td> will be loaded dynamically using above mentioned showTable jquery

Jsel Over a year ago

thanks. but my table is loaded dynamically, so i will get the values from database till item name, code, supplier,received qty, rest of the column like accepted, rejected, received will be filled by user, so when user clicks save/check box . i want to get all the cell values which are reterived from database as well as user. but i can get only the values reterived from table not from user entry

Collectives™ on Stack Overflow

get the values of all cells in table row using jquery

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related