Question

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

<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>的每一行的电子邮件？

Answer 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

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

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

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

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

Answer 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());

}
);

使用表中的jQuery收集数据

2 个答案: