Как передать выбранные строки флажка в функцию - PullRequest
Новая
       17

Как передать выбранные строки флажка в функцию

0 голосов
/ 06 декабря 2018

Я должен передать выбранные строки в функцию ().Из приведенного ниже кода я могу получить значение выбранного флажка, но не могу получить всю строку.Пожалуйста, помогите мне узнать, как получить все выделенные строки и передать эти строки в функцию.

мой 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)
    }

Это будет очень полезно для меня, если я получу рабочий код.Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

Один из способов достижения этого выглядит следующим образом:

Первый: получить ссылку на элемент ввода, который вызвал функцию.Из этого элемента вы можете связаться с .closest() родительским элементом, который имеет тег <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);
});
<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>
0 голосов
/ 06 декабря 2018

Это было бы более эффективным решением вашей проблемы.Недостаток принятого ответа заключается в том, что он будет срабатывать всякий раз, когда вы щелкаете внутри таблицы (даже когда вы нажимаете на текст).

Здесь обновляется только при установленном флажке. 

$(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>
0 голосов
/ 06 декабря 2018

Вам просто нужно добавить .parent() в вашем операторе result.push, чтобы получить всю строку, потому что вы получаете только ячейку: 

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