使用jquery獲取錶行中所有單元格的值

Question

我想要使用複選框選擇表格行中每個單元格中的值。 場景：無論何時用戶單擊顯示錶按鈕，我的頁面都會動態加載表格中的一些數據，其中包含複選框，項目名稱，項目代碼，數量，已拒絕和已接受等列。現在，我想要在用戶單擊名爲「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(); 
 
      \t var table1 = $("#itemtable"); 
 
\t   $.each(responseJson, function(key,value) { 
 
\t    var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
 
\t    rowNew.children().eq(0).html('<input type="checkbox" />'); 
 
\t    rowNew.children().eq(1).text(value['itemname']); 
 
\t    rowNew.children().eq(2).text(value['itemcode']); 
 
\t    rowNew.children().eq(3).text(value['supplier']); 
 
\t    rowNew.children().eq(4).text(value['receivedqty']); 
 
\t    rowNew.children().eq(5).html('<input type="text" class="tb2"/>'); 
 
\t    rowNew.children().eq(6).html('<input type="text" class="tb2"/>'); 
 
\t    rowNew.children().eq(7).html('<input type="text" class="tb2"/>'); 
 
\t    rowNew.appendTo(table1); 
 
\t   });                     
 
      } 
 
     }); 
 
     $("#tablediv").show();   
 
    });  
 
});

<br/> 
 
<div id="tablediv"> 
 
<table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
    \t <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(){ 
 
\t // 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> 
 
    \t <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

首先您給複選框 「名」，S UCH爲：

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

請查看EXAMPLE