jqueryを使用してテーブル行のすべてのセルの値を取得します

Question

チェックボックスを使用して選択されたテーブル行の各セルの値を取得します。 シナリオ：ユーザーがshow tableボタンをクリックするたびに、マイページには、チェックボックス、項目名、商品コード、数量、拒否および受け入れのような列を持つテーブルのデータが動的にロードされます。ユーザーが「保存」ボタンをクリックすると、選択した行の値を取得します。まず、あなたのチェックボックスに "名前" を与える

<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