Question

我正在运行一个非常简单的jQuery脚本来获取表格中复选框选中的所有电子邮件。该表如下所示：

<table>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" value="MD5HASH" />
            </td>
            <td>
                First Name
            </td>
            <td class="email">
                Email Address
            </td>
        </tr>
    </tbody>
</table>

我的jQuery看起来像这样：

$("#submitButton").click(function() {
    var output = [];
    $("table tbody tr:has(input:checkbox:checked)").each(function() {
        var email = $('td.email', $(this)).text();
        if (validate(email) && output.indexOf(email) == -1)
            output.push(email);
    }); 

    $("#emails").val(output.join(", "));
});

function validate(email) {
    return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(email); 
}

这在IE中失败了，但在其他地方都可以使用。

table tbody tr:has(input:checkbox:checked)选择器不匹配任何内容。
验证调用会引发Object expected错误。

WHY！？ jQuery是不是设计成跨浏览器和便携式的？

Answer 1

Internet Explorer（＆lt; 9）没有Array.prototype.indexOf。尝试使用jQuery的$.inArray代替它（它是跨浏览器，如果它存在，将实际使用Array.prototype.indexOf :- P）。

if (validate(email) && $.inArray(email,output) == -1)
  output.push(email);

Answer 2

给输入一个类并直接定位它......

<table>
    <tbody>
        <tr>
            <td>
                <input class="emailchecked" type="checkbox" value="MD5HASH" />
            </td>
            <td>
                First Name
            </td>
            <td class="email">
                Email Address
            </td>
        </tr>
    </tbody>
</table>

然后在你的js中定位已检查的那些：

$("#submitButton").click(function() {
    var output = [];
    $(".emailchecked ([checked='checked'])").each(function() {
        var email = $('td.email', $(this)).text();
        if (validate(email) && output.indexOf(email) == -1)
            output.push(email);
    }); 

    $("#emails").val(output.join(", "));
});

function validate(email) {
    return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(email); 
}

Answer 3

    <table>
        <tr><td><input type="checkbox" value=""/></td><td>one@gmail.com</td></tr>
            <tr><td><input type="checkbox" value=""/></td><td>two@gmail.com</td></tr>
            <tr><td><input type="checkbox" value=""/></td><td>three@gmail.com</td></tr>
            <tr><td><input type="checkbox" value=""/></td><td>four@gmail.com</td></tr>
     </table>

    <input id="btnSubmit" type="button" value="Submit"/>

    <div id="emails"></div>

    <script type="text/javascript">
    $('#btnSubmit').click(function(e){
        var emails = [];
        $('table').find('input').each(function() {
            if ($(this).is(':checked'))
                emails.push($(this).parent().next().text());
        });

        $("#emails").empty().html(emails.join(", "));

    });
    </script>

Since you have three columns instead of two, just walk the DOM for that row.

为什么Internet Explorer不能运行这个简单的jQuery？

3 个答案: