Question

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

我的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 invokeAllEligibleSaves(result){
       alert(result)
    }

如果我得到有效的代码，这对我将非常有用。预先感谢。

Answer 1

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

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

Answer 2

一种实现方法是这样的：

首先：获取对触发该函数的输入元素的引用。通过该元素，您可以到达具有标签.closest()的{{1}}父级。

第二：然后可以查询其所有<tr> <td>，每个孩子将有.children()或.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);
});

Answer 3

这将是解决您的问题的更有效解决方案。接受答案的缺点是，无论何时何地在表中单击（即使单击文本），都会触发该错误。

仅在选中此复选框时，它才会更新。

$(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>

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

3 个答案: