javascript - 仅当表格复选框为 "checked"时获取表格行

Question

我使用下面的代码通过 checkbox class = btnSelect 检索选定行的值。

我只想在 checkbox 标记为选中时获取行。

当前代码在选中和取消选中 checkbox 时获取值。

为什么当复选框被选中或未选中时，下面的代码会获取值？

$("#itemtable").on('click', '.btnSelect', function() {
   // get the current row 
   alert("i am inside dddd");
   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) input[type='text']").val(); // get accepted qty
   var col7 = $(currentRow).find("td:eq(6) input[type='text']").val(); // get rejected qty
   var col8 = $(currentRow).find("td:eq(7) input[type='text']").val(); // get remarks

   var data = col1 + "\n" + col2 + "\n" + col3 + "\n" + col4 + "\n" + col5 + "\n" + col6 + "\n" + col7 + "\n" + col8;

   alert(data);
});

[![在此处输入图片描述][1]][1]

Answer 1

$(document).ready(function() {
  $("#saverecord").click(function(event) {
    //$("#itemtable").on('click', '.btnSelect', function() {
    // get the current row 

    var currentRow = $(".btnSelect:checked").closest("tr");
    console.log(currentRow.index())
    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()
    var col7 = currentRow.find("td:eq(6)").text()
    var col8 = currentRow.find("td:eq(7)").text()

    var data = col1 + "\n" + col2 + "\n" + col3 + "\n" + col4 + "\n" + col5 + "\n" + col6 + "\n" + col7 + "\n" + col8;

    console.log(data);





  });

  //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tablediv">
  <table cellspacing="0" id="itemtable" align="center">
    <tr>
      <td><input type="checkbox" class="btnSelect" id="chk" name="chk" /></td>
      <th scope="col"> SIno</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="btnSelect" id="chk" name="chk" /></td>
      <td> 1 </td>
      <td> biscuit </td>
      <td>e123</td>
      <td>abc company</td>
      <td>23</td>
      <td>20</td>
      <td>3</td>
      <td>waste</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="btnSelect" id="chk" name="chk" /></td>
      <td> 2 </td>
      <td> chocolate </td>
      <td>e526</td>
      <td>xyz company</td>
      <td>25</td>
      <td>20</td>
      <td>5</td>
      <td>waste</td>
    </tr>
  </table>
  <input type="button" value="Save the record" id="saverecord" class="button0">
</div>

不要使用这个上下文，因为你的点击事件是保存按钮