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() { 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 2

我建议您不要在每次要汇总结果时都单击按钮，而是建议您在每次单击复选框时都处理结果对象，这样可以使状态更稳定并更好地处理动态更改。 考虑将代码更改为：

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/

Answer 3

 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 4

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 5

您可以使用类似下面的内容。 我修改了内部查询以转到父级并查找同级。

  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>