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

请查看EXAMPLE