CODEWITHSUNDEEP
javascriptjquery
user1692333
user1692333

Reputation: 2597

How to select element except its children?

I have simple table which looks like this:

<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>

When i click on tr i need to add custom class to it, but only whe i click on tr, not on the input inside it. How to do this?

I tried something like this:

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

Upvotes: 0

Views: 89

Answers (4)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

I think the best you can do here is check the node name to see if it is the td or the tr - or include other tags if you want.

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

If you specifically want the input excluded, you could then exclude those:

$('tbody').on('click', 'tr', function (e) {
    if (!$(e.target).is(':input')) {
        $(this).toggleClass('error');
    }
});

Upvotes: 1

Jasper
Jasper

Reputation: 75993

You can stop the event from bubbling up to the tr element by using event.stopPropagation:

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

Here's some documentation for ya if you'd like to know more: http://api.jquery.com/event.stopPropagation/

Here's a JSFiddle of the solution: http://jsfiddle.net/tM59b/1/

Upvotes: 1

Roy Miloh
Roy Miloh

Reputation: 3411

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

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

Upvotes: 2

Robin
Robin

Reputation: 7895

Add a click listener to the input and return false; from it to stop the event from propagating to the tr.

Like so:

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

Upvotes: 0

Related Questions