如何将选定的复选框行传递给函数

Question

我必须将选定的行传递给函数 ( )。从下面的代码中，我能够获取所选复选框的值但无法获取整行。请帮助我了解如何获取整个选定行并将这些行传递给函数。

我的html代码：

    <div id ="div_table">
    <table id="myTable">
       <tr>
         <th>SELECT</th>
         <th>BANKID</th>
         <th>EFFECTIVE SAVE DATE</th>
         <th>SAVE MONTH</th>
         <th>MONTH OF SUBMISSION</th>
         <th>PILLAR</th>
         <th>LEVER</th>
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1000" id="1000"></td> 
         <td id="bank" >100000</td>
         <td id="edate">10-02-2009</td>
         <td id="month">Jan</td>
         <td id="subMonth"><input type="text" id="subMonth"></td>
         <td id="pillar"><input type="text" id="pillar1"></td>
         <td id="lever"><input type="text" id="lever1"></td>
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1001" id="1001"></td> 
         <td id="bank1" >100001</td>
         <td id="edate1">12-12-2010</td>
         <td id="month1">Feb</td>
         <td id="subMonth1"><input type="text" id="subMonth2"></td>
         <td id="pillar1"><input type="text" id="pillar2"></td>
         <td id="lever1"><input type="text" id="lever12"></td>  
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1002" id="1002"></td> 
         <td id="bank2" >100002</td>
         <td id="edate2">18-02-2018</td>
         <td id="month2">Apr</td>
         <td id="subMonth2"><input type="text" id="subMonth3"></td>
         <td id="pillar2"><input type="text" id="pillar3"></td>
         <td id="lever2"><input type="text" id="lever13"></td>  
       </tr>
     </table>
     </div>

我的jQuery代码：

        $('#div_table').click(function() {
          var result = []
          $('input:checkbox:checked', tableControl).each(function() {
            result.push($(this).parent().next().text());
          });
          alert(result);
        });

选择的行应该传递到下面function:I必须使用这些行一一存储。

    function invokeAllEligibleSaves(result){
       alert(result)
    }

如果我得到一个工作代码，这对我来说将非常有用。提前致谢。

Answer 1

您只需要在 result.push 语句中添加一个额外的 .parent() 即可获取整行，因为到目前为止您只获取了单元格：

result.push($(this).parent().parent().next().text());

Answer 2

一种实现方式是这样的：

首先：获取对触发函数的输入元素的引用。从该元素，您可以到达具有标签 <tr>.

的 .closest() parent

其次：然后可以查询它的所有 <td> .children() 并且每个 child 将有 .text() 或 .html() 来报告.我想在你的情况下，你对文本部分感兴趣。

第三：您需要将所有 .text() 值放入单独的数组中，这将是您的行。然后将该行推入另一个数组 result。所以你的结果将是一个数组数组。

$('#div_table').click(function() {
  var result = []   // create an empty array for all rows
  $('input:checkbox:checked').each(function() {
    var row = [];   // create an empty array for the current row
    
    //loop through all <td> elements in that row
    $(this).closest('tr').children('td').each(function(){
      // add .text() or .html() if you like
      row.push($(this).text());
    });
    // now push that row to the result array
    result.push(row);
  });
  alert(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="div_table">
  <table id="myTable">
    <tr>
      <th>SELECT</th>
      <th>BANKID</th>
      <th>EFFECTIVE SAVE DATE</th>
      <th>SAVE MONTH</th>
      <th>MONTH OF SUBMISSION</th>
      <th>PILLAR</th>
      <th>LEVER</th>
    </tr>
    <tr>
      <td><input type='checkbox' name='chck' value="1000" id="1000"></td>
      <td id="bank">100000</td>
      <td id="edate">10-02-2009</td>
      <td id="month">Jan</td>
      <td id="subMonth"><input type="text" id="subMonth"></td>
      <td id="pillar"><input type="text" id="pillar1"></td>
      <td id="lever"><input type="text" id="lever1"></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='chck' value="1001" id="1001"></td>
      <td id="bank1">100001</td>
      <td id="edate1">12-12-2010</td>
      <td id="month1">Feb</td>
      <td id="subMonth1"><input type="text" id="subMonth2"></td>
      <td id="pillar1"><input type="text" id="pillar2"></td>
      <td id="lever1"><input type="text" id="lever12"></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='chck' value="1002" id="1002"></td>
      <td id="bank2">100002</td>
      <td id="edate2">18-02-2018</td>
      <td id="month2">Apr</td>
      <td id="subMonth2"><input type="text" id="subMonth3"></td>
      <td id="pillar2"><input type="text" id="pillar3"></td>
      <td id="lever2"><input type="text" id="lever13"></td>
    </tr>
  </table>
</div>

Answer 3

对于您的问题，这将是一个更有效的解决方案。已接受答案的缺点是，无论何时何地在 table 中单击（即使单击文本时），它都会被触发。

此处仅当复选框被选中时才会更新。

$(document).ready(function() {

  $('input:checkbox').on('change', function() {
    var result = [];

    $('input:checkbox:checked').each(function() {

      var rowText = '';
      $(this).parent().siblings().each(function() {
        rowText += $(this).text() + ' ';
      });
      result.push(rowText.trim());
    });

    alert(JSON.stringify(result));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="div_table">
    <table id="myTable">
       <tr>
         <th>SELECT</th>
         <th>BANKID</th>
         <th>EFFECTIVE SAVE DATE</th>
         <th>SAVE MONTH</th>
         <th>MONTH OF SUBMISSION</th>
         <th>PILLAR</th>
         <th>LEVER</th>
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1000" id="1000"></td> 
         <td id="bank" >100000</td>
         <td id="edate">10-02-2009</td>
         <td id="month">Jan</td>
         <td id="subMonth"><input type="text" id="subMonth"></td>
         <td id="pillar"><input type="text" id="pillar1"></td>
         <td id="lever"><input type="text" id="lever1"></td>
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1001" id="1001"></td> 
         <td id="bank1" >100001</td>
         <td id="edate1">12-12-2010</td>
         <td id="month1">Feb</td>
         <td id="subMonth1"><input type="text" id="subMonth2"></td>
         <td id="pillar1"><input type="text" id="pillar2"></td>
         <td id="lever1"><input type="text" id="lever12"></td>  
       </tr>
       <tr>
         <td><input type='checkbox' name='chck' value="1002" id="1002"></td> 
         <td id="bank2" >100002</td>
         <td id="edate2">18-02-2018</td>
         <td id="month2">Apr</td>
         <td id="subMonth2"><input type="text" id="subMonth3"></td>
         <td id="pillar2"><input type="text" id="pillar3"></td>
         <td id="lever2"><input type="text" id="lever13"></td>  
       </tr>
     </table>
</div>

如何将选定的复选框行传递给函数

How to pass the selected checkbox rows to a function

html

javascript

jquery

checkboxlist