使用jQuery獲取表行中所有單元格的值

Question

我想獲取使用復選框選中的表格行中每個單元格中的值。 場景：每當用戶單擊“顯示表格”按鈕時，我的頁面就會動態加載表格中的某些數據，表格中的這些復選框包括復選框，項目名稱，項目代碼，數量，已拒絕和已接受。 現在，我想在用戶單擊名為“保存”的按鈕時獲取選定行的值。

 <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

我在示例下面遇到了所有已檢查行的表格單元格的值。

 $('.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

首先在您的復選框中輸入“名稱”，例如：

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

JS代碼：

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

請查看示例