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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但我只选择了一些名字。我怎样才能获得其他列？

Answer 1

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

观察控制台。您可以在一个对象中获取所有信息，然后可以将其用于您可能希望它执行的任何其他功能

＆＃13;

＆＃13;

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);
    });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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);
    });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

The drush command 'migrate-import book_content' could not be found.

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

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>