Jsel Jsel -4 years ago 86
HTML Question

get the values of all cells in table row using jquery

i would like to get the values in each cell in table row which is selected using checkbox.
Scenario: Whenever user clicks show table button, my page dynamically loaded with some data from tables, which has columns like checkbox, Item name, Item code, Quantity, Rejected, accepted. Now i want to get the values of selected rows when user click 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>




Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download