javascript - How to handle a TR click without the first and last TD - Stack Overflow

admin管理员组

文章数量:1277902

I have a Datatables Table with some random values in it. I would like to create a popup when the client clicks on the TR itself, but NOT on the first and the last TD of the table.

<table class="table href="#popup">
    <tr id="tr1">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr2">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr3">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr4">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
</table>

My popup plugin works like, if an href link is called and the popup div's id equals to that href value, it automatically pops up.

However if someone clicks on the first or the last TD do NOT want the popup to activate. Is it actually possible to achieve this somehow?

(The following solution should not be mentioned, because it would make the code look like a mess literally: if I select all the TD fields without the first and last, and add a href attribute to all of the selected TD elements.)

Any other suggestions are weled!

I have a Datatables Table with some random values in it. I would like to create a popup when the client clicks on the TR itself, but NOT on the first and the last TD of the table.

<table class="table href="#popup">
    <tr id="tr1">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr2">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr3">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr4">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
</table>

My popup plugin works like, if an href link is called and the popup div's id equals to that href value, it automatically pops up.

However if someone clicks on the first or the last TD do NOT want the popup to activate. Is it actually possible to achieve this somehow?

(The following solution should not be mentioned, because it would make the code look like a mess literally: if I select all the TD fields without the first and last, and add a href attribute to all of the selected TD elements.)

Any other suggestions are weled!

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 25, 2022 at 16:48 Trenton McKinney 62.5k4141 gold badges165165 silver badges192192 bronze badges asked Mar 20, 2014 at 21:27 FragileFragile 7111 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

When you click, the event is propagated from the child nodes to the parent nodes (learn more here).

You can disable event propagation in both td:first-child and td:last-child elements inside your table in order to prevent your tr event handler from being reached.

I'd also suggest you to use event delegation to keep better performance.

$('.table').on('click', 'tr', function() {
    alert('show popup'); 
});

$('.table').on('click', 'td:first-child, td:last-child', function(e) {
    e.stopPropagation();
});

FIDDLE: http://jsfiddle/6QTrL/1/

Just use this:

Using :first-child and :last-child with not()

$('table tbody tr td').not(":first-child").not(":last-child").click(function(
   //This will only be triggered on the td that are not the first or the last on a tr

))

Here's a fiddle to acplish that - First and Last row now clickable

I have the first and last row throwing an alert but that's just to give you an idea of how to target them.

$(function(){
    var tableRows = $('table').find('tr');

    $('table').on('click', 'tr', function(){

        if (this == tableRows[0])
            alert('first row');
        else if (this == tableRows[tableRows.length - 1])
            alert('last row');
        else
            alert('somewhere in the middle');
    });    
});

The code below is probably more along the lines of what you're looking for. I made the code above in the fiddle so I just pasted that as well.

$(function(){
    var tableRows = $('table').find('tr');

    $('table').on('click', 'tr', function(){
        if (this != tableRows[0] && this == tableRows[tableRows.length - 1])
            alert('somewhere in the middle');
    });    
});

本文标签： javascriptHow to handle a TR click without the first and last TDStack Overflow