Question

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

<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');
    });

Answer 1

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

    $(this).toggleClass('error');
});

Answer 2

您可以使用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/

Answer 3

我认为你在这里做的最好的事情就是检查节点名称以查看它是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');
    }
});

Answer 4

向其中的input和return false;添加点击监听器，以阻止该事件传播到tr。

像这样：

$('tr input').click(function(e){
    return false;
});

如何选择除孩子以外的元素？

4 个答案: