jQuery从选定的行中选择所有数据

Question

我有一张表。我想从所有选定的行中获取姓名，姓氏，电子邮件（检查已设置）。也许名字，姓氏，电子邮件将是数组。 我该怎么办？ 我已经试过这样：

var tableControl= document.getElementById('mytable'); 
 
$("#btn").click(function() { 
 
    var result = []; 
 
    $('input:checkbox:checked', tableControl).each(function() { 
 
     result.push($(this).parent().next().text()); 
 
    }); 
 
    alert(result); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td id="name_1">Petya</td> 
 
    <td id="last_1">L1</td> 
 
    <td id="country_1">Country1</td> 
 
    <td id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td id="name_2">Kolya</td> 
 
    <td id="last_2">L2</td> 
 
    <td id="country_2">Country2</td> 
 
    <td id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td id="name_3">Vasya</td> 
 
    <td id="last_3">L3</td> 
 
    <td id="country_3">Country3</td> 
 
    <td id="email_3">Email3</td> 
 
</tr>

，但我得到唯一入选的名称。我怎样才能得到其他专栏？

Answer 1

var tableControl= document.getElementById('mytable'); 
 
    $("#btn").click(function() { 
 
     var result = []; 
 

 
     $('input:checkbox:checked', tableControl).each(function() {   
 
      // Get the entire text 
 
      //alert($(this).closest('tr').children('td').text()); 
 
      //alert($(this).parent().next().find('td').text()); 
 
      // Get each column 
 
      $(this).closest('tr').children('td').each(function(e){ 
 
       alert($(this).text()); 
 
      }); 
 
      result.push($(this).closest('tr').children('td').text()); 
 
     }); 
 
     alert(result); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td id="name_1">Petya</td> 
 
    <td id="last_1">L1</td> 
 
    <td id="country_1">Country1</td> 
 
    <td id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td id="name_2">Kolya</td> 
 
    <td id="last_2">L2</td> 
 
    <td id="country_2">Country2</td> 
 
    <td id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td id="name_3">Vasya</td> 
 
    <td id="last_3">L3</td> 
 
    <td id="country_3">Country3</td> 
 
    <td id="email_3">Email3</td> 
 
</tr> 
 
<button id="btn">Get Data</button>

Answer 2

这是做事的一种可能的方式。我为每种类型的列设置了一个类。您可以使用它来查找检查行的所有其他信息。

观察控制台。你在一个对象中的所有信息，然后你就可以使用任何进一步的功能，你可能希望它做的

var tableControl= document.getElementById('mytable'); 
 
    $("#btn").click(function() { 
 
     var result = []; 
 
     $('input:checkbox:checked', tableControl).each(function() { 
 
      var obj={}; 
 
      var parent=$(this).parent().parent(); 
 
      obj.name=(parent.find(".name").text()); 
 
      obj.last=(parent.find(".last").text()); 
 
      obj.country=(parent.find(".country").text()); 
 
      obj.email=(parent.find(".email").text()); 
 
      result.push(obj); 
 
     }); 
 
     console.log(result); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td class="name" id="name_1">Petya</td> 
 
    <td class="last" id="last_1">L1</td> 
 
    <td class="country" id="country_1">Country1</td> 
 
    <td class="email" id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td class="name" id="name_2">Kolya</td> 
 
    <td class="last" id="last_2">L2</td> 
 
    <td class="country" id="country_2">Country2</td> 
 
    <td class="email" id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td class="name" id="name_3">Vasya</td> 
 
    <td class="last" id="last_3">L3</td> 
 
    <td class="country" id="country_3">Country3</td> 
 
    <td class="email" id="email_3">Email3</td> 
 
</tr> 
 
<button id="btn">Click</button>

Answer 3

var tableControl= $('#mytable'); 
$("#btn").click(function() { 
    var result = []; 
    tableControl('input[type="checkbox"]:checked').each(function() { 
     var nodeArray = $(this).parents('tr').find('td'); 
     var innerArray = []; 
     for(var i = 1; i < nodeArray.length; i++) { 
      if(nodeArray.hasOwnProperty(i)) { 
       innerArray.push(nodeArray[i].text()); 
      } 
     } 
     if(innerArray.length > 0) { 
      result.push(innerArray); 
     } 
    }); 
    alert(result); 
}); 

请试试这个，我没有测试过，但我认为它应该做你想做的事。

Answer 4

你可以使用下面的东西。我修改了你的内部查询，转到父项并查找兄弟。

var tableControl = $('#mytable'); 
 
$("#btn").click(function() { 
 

 
    var result = []; 
 
    $('input:checkbox:checked').each(function(item) { 
 
    $(this).parent().siblings().each(function() {  
 
     result.push($(this).text()) 
 
    }); 
 
    }); 
 
    alert(result) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td id="name_1">Petya</td> 
 
    <td id="last_1">L1</td> 
 
    <td id="country_1">Country1</td> 
 
    <td id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td id="name_2">Kolya</td> 
 
    <td id="last_2">L2</td> 
 
    <td id="country_2">Country2</td> 
 
    <td id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td id="name_3">Vasya</td> 
 
    <td id="last_3">L3</td> 
 
    <td id="country_3">Country3</td> 
 
    <td id="email_3">Email3</td> 
 
</tr> 
 
</table> 
 
    <button id ="btn">Click Me</button>

Answer 5

而是点击一个按钮，你要总结你的结果每一次的，我建议你处理结果对象随时点击复选框，这使得一个更加稳定状态并更好地处理动态变化。考虑将代码更改为如下所示：

var tableControl = $('#mytable'); 

//An object that maps checkbox id to an object containing name, last and email 
var result = {}; 
tableControl.find('input:checkbox').click(function() { 
    var key = $(this).attr('id'); 
    //If checkbox clicked and not checked, then remove object from map 
    if(!$(this).is(":checked")){ 
     delete result[key]; 
     return; 
    } 
    var row = $(this).parent().parent(); 
    //Get children based on the start of the id string 
    var firstName = row.children("td[id^='name']").text(); 
    var lastName = row.children("td[id^='last']").text(); 
    var email = row.children("td[id^='email']").text(); 
    result[key] = { 
    name: firstName, 
    last : lastName, 
    email: email 
    } 
}); 

这样，无论何时单击复选框，结果对象都会立即更新以反映所需的值。结果对象将看起来像这样：

{ 
    "check_1": { 
    "name": "Petya", 
    "last": "L1", 
    "email": "Email1" 
    }, 
    "check_2": { 
    "name": "Kolya", 
    "last": "L2", 
    "email": "Email2" 
    }, 
    "check_3": { 
    "name": "Vasya", 
    "last": "L3", 
    "email": "Email3" 
    } 
} 

https://jsfiddle.net/p35kz2u1/6/