0

我有一个简单的表格，如下所示：

<table>
    <tbody>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr class="error">
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
    </tbody>
</table>

当我点击时，tr我需要向它添加自定义类，但只有当我点击时tr，而不是在input里面。这个怎么做？

我试过这样的事情：

table.find('tbody').on('click', 'tr:not(input)', function(){
        jQuery(this).toggleClass('error');
    });
4

4 回答 4

2 
table.find('tbody').on('click', 'tr', function(e) {
    if (e.target != this)
        return;    

    $(this).toggleClass('error');
});
于 2013-09-23T22:16:10.467 回答
1

我认为您可以在这里做的最好的事情是检查节点名称以查看它是 td 还是 tr - 或者如果您愿意，可以包含其他标签。

$('tbody').on('click', 'tr', function (e) {
    if (e.target.nodeName.toLowerCase() === "td" || e.target.nodeName.toLowerCase() === "tr") {
        $(this).toggleClass('error');
    }
});

如果您特别希望排除输入，则可以排除这些：

$('tbody').on('click', 'tr', function (e) {
    if (!$(e.target).is(':input')) {
        $(this).toggleClass('error');
    }
});
于 2013-09-23T23:05:24.447 回答
1

您可以使用以下命令阻止事件冒泡到tr元素event.stopPropagation：

table.find("tr").on("click", function () {
    jQuery(this).toggleClass("error");
}).find("input").on("click", function (event) {
    event.stopPropagation();
});

如果您想了解更多信息，这里有一些文档供您参考：http: //api.jquery.com/event.stopPropagation/

这是解决方案的 JSFiddle：http: //jsfiddle.net/tM59b/1/

于 2013-09-23T22:08:53.337 回答
0

input向和从它添加一个单击侦听器return false;以阻止事件传播到tr.

像这样：

$('tr input').click(function(e){
    return false;
});
于 2013-09-23T22:09:03.977 回答