javascript - jQuery 从选定行中选择所有数据

Question

我有一张 table 。我想从所有选定的行中获取姓名、姓氏和电子邮件(已设置检查)。也许姓名、姓氏、电子邮件将是数组。 我该怎么做？ 我试过这个:

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>