如果選中複選框，如何從表中獲取數據值？在表

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