如何將選定的復選框行傳遞給函數

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

您只需要在result.push語句中使用一個附加的.parent()來獲取整行，因為到目前為止只獲取了該單元格：

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

Answer 2

一種實現方法是這樣的：

首先：獲取對觸發該函數的輸入元素的引用。 從此元素，您可以到達具有標簽<tr>的.closest()父對象。

第二：然后可以查詢所有<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); }); 

 <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

對於您的問題，這將是一個更有效的解決方案。 接受答案的缺點是，無論何時何地在表中單擊（即使單擊文本），都會觸發該錯誤。

在這里，僅當選中復選框時，它才會更新。

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