チェックボックスが選択されている場合、テーブルからデータ値をフェッチする方法は？

Question

私は

 <table> 
      <thead> 
      ... 
      </thead> 

      <tbody> 
       <tr> 
       <td><input id="1" type="checkbox"/></td> 
       .. 
       <td class="email">esha@gmail.com</td> 
       </tr> 

       <tr> 
       <td><input id="2" type="checkbox"/></td> 
       .. 
       <td class="email">Nisha@gmail.com</td> 
       </tr> 
      ... 
      </tbody> 
     </table> 
     ... 
     ... 
     <input type="button" onclick="saveAndSend()" /> 

      function saveAndSend() 
       { 
        var ele = $("tbody").find('input'); 
        if(ele.is(':checked')){ 
        var studentList = "1,2"; 
        var emailAddresses = "esha@gmail.com, Nisha@gmail"; 
        }); 
       } 

のような表が今jQueryのでは、私が選択したすべてのIDを取得したい持っている/テーブル のチェックボックスをチェックし、変数に入れ、選択の電子メールアドレスをフェッチ/テーブル内のチェックボックスをチェックし、それらを別の変数に入れてください。

私を助けてください！

Answer 1

:checkedのチェックボックスを反復し、DOMトラバーサルメソッドを使用してemail要素をターゲットにする必要があります。

$(function() { 
 
    $('#saveAndSend').on('click', function() { 
 
    //Iterate and create an array 
 
    var arr = $("table").find(':checkbox:checked').map(function() { 
 
     var $this = $(this) 
 
     return { 
 
     id: $this.attr('id'), 
 
     email: $this.closest('tr').find('.email').text() 
 
     } 
 
    }).get(); 
 

 
    var ids = arr.map(function(e) { 
 
     return e.id 
 
    }).join(','); 
 
    
 
    var emails = arr.map(function(e) { 
 
     return e.email 
 
    }).join(','); 
 
    console.log(ids, emails); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td><input id="1" type="checkbox" /></td> 
 
     <td class="email">esha@gmail.com</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input id="2" type="checkbox" /></td> 
 
     <td class="email">Nisha@gmail.com</td> 
 
    </tbody> 
 
</table> 
 
<button type="button" id="saveAndSend">Send</button>

あなたはjQueryの控えめなイベントハンドラを使用して使用しているとしても、注意してください。

参照

• .map()
• .closest()
• .find()

Answer 2

それはあなたを助けるかもしれません。

function saveAndSend() 
 
       { 
 
       var ele = $("tbody").find('input'); 
 
       var saveInto=[]; 
 
        $.each(ele, function(index, val) { 
 
        if($(val).is(':checked')){ 
 
         var id=$(val).attr('id'); 
 
         var email=$(val).closest('tr').find('.email').text(); 
 
         var temp={id:id,email:email}; 
 
         saveInto.push(temp); 
 
        } 
 
         
 
         
 
        }); 
 
        console.log(saveInto); 
 
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
      <thead> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td><input id="1" type="checkbox"/></td>  
 
       <td class="email">esha@gmail.com</td> 
 
       </tr> 
 
       <tr> 
 
       <td><input id="2" type="checkbox"/></td> 
 
       <td class="email">Nisha@gmail.com</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
<input type="button" onclick="saveAndSend()" />

Answer 3

あなたはこの方法は、単にこのようやめるJavaScriptの無地で、あなたの目標を達成することができます

checkedEmails = [] 
chboxes = document.querySelectorAll('input[type="checkbox"]') 
emails = document.querySelectorAll('.email') 
checkedEmails = [] 

for (var i = 0; i < chboxes.length; i++) 
{ 

    if (chboxes[i].checked) 
     checkedEmails.push(emails[i].innerHTML) 

} 

をして、あなたは変数checkedEmailsにご希望のメールを持つことになります

Answer 4

var studentList =[]; 
    var emailAddresses=[]; 
    $('table tr').each(function (i, row) { 
    var tr =$(row); 
    var chk= tr.find('input[type="checkbox"]').is(':checked') 
    console.log(chk) 
    if(chk){ 
     emailAddresses.push(tr.find('.email').text()) 
     studentList.push(tr.find('input[type="checkbox"]').prop('id')) 
     console.log(emailAddresses); 
     console.log(studentList);   
    } 
    }); 

DEMO