使用 jQuery 从表中收集数据答案

【问题标题】：Collecting data with jQuery from a table使用 jQuery 从表中收集数据
【发布时间】：2011-10-18 05:40:17
【问题描述】：

我有一个看起来有点像这样的表：

<table>
    <thead>
       <tr>
           <th></th>
           <th>Name</th>
           <th>Email</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td class='checkinput'>
                <input type="checkbox" name="names" value="MD5_HASH"/>
            </td>
            <td>
                John Doe
            </td>
            <td>
                email@mail.com
            </td>
        </tr>
        <!-- etc. -->
    </tbody>
</table>

基本上，我正在尝试构建一个应用程序，您可以在其中选择表中所需的每一行，然后将电子邮件导出到逗号分隔的列表中。我遇到的问题是如何遍历表并获取我需要的信息。

目前，为了方便起见，我已经完成了以下操作以尝试使每一行在单击时都切换复选框。不幸的是，当直接点击复选框时，什么也没有发生，因为它试图在调用 JavaScript 时自行切换，将其返回到原来的位置：

$("tr").click(function() {
    var $checkbox = $(this).find(":checkbox");
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

如何优化它以使其能够单击输入本身而不发生这种冲突？

另外，当我终于准备好提交时，如何遍历表格并从选择<input> 的每一行中读取电子邮件？

【问题讨论】：

您可以阻止复选框本身的默认操作，以便只有行可以切换其状态。
我不知道，这是一个想法，这就是为什么我只是发表评论而不是答案。 :) 希望其他人知道。

标签： jquery html dom jquery-selectors

【解决方案1】：

[因误解而编辑以纠正第一部分的错误]

为防止出现不良的复选框行为，如果直接点击复选框，请退出处理程序：

$("tr").click(function(e) {
    if ($(e.target).is(':checkbox')) return;
    var $checkbox = $(this).find(":checkbox");
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

如果事件源自复选框，我们让复选框执行其默认行为。 Reference for learning.

要仅在选中的行上获取电子邮件，您应该考虑在<td> 上设置class="email"，以便以后更轻松地进行更改。然后，使用这样的东西：

var emails = [];
$("table tbody tr:has(input:checkbox:checked)").each(function(){
   emails.push( $('td.email', $(this)).text() );
});

另请注意，您可能需要修剪该字符串以删除开头和结尾不需要的空格。

了解使用的选择器（:checkbox、:checked 和 :has）see here。

【讨论】：

+1，不错的答案，还可以考虑使用 map() 将元素中的值而不是 each() 和 push() 投影到本地数组。

【解决方案2】：

函数内部的第一个问题检查：

$("tr).click(function(e) {
if (e.target.id==xxx)      //  if ($('#'+e.target.id).attr('class')=='classssss') ...
....


});

如果它有 id（或类 - 更好）是复选框，如果是......

第二个问题：

$(".table tr:gt(0)").each (

function () {

alert($('td:eq(2)',$(this)).text());

}
);

【讨论】：