Как обрабатывать клик TR без первого и последнего TD в jQuery?

0

У меня есть таблица Datatables с некоторыми случайными значениями в ней. Я хотел бы создать всплывающее окно, когда клиент нажимает на сам TR, но не на первый и последний TD таблицы.

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

Мой всплывающий плагин работает так, как если бы href ссылка href а id popup div равен этому значению href, он автоматически появляется.

Однако, если кто-то нажимает на первый или последний TD, НЕ хотите, чтобы всплывающее окно активировалось. Действительно ли это возможно добиться?

(Не следует упоминать следующее решение, потому что это сделает код похожим на беспорядок буквально: если я выберу все поля TD без первого и последнего и добавлю атрибут href ко всем выбранным элементам TD).

Любые другие предложения приветствуются!

Теги:

3 ответа

1
Лучший ответ

Когда вы нажимаете, событие распространяется от дочерних узлов к родительским узлам (подробнее здесь).

Вы можете отключить распространение событий как в элементах td:first-child и td:last-child внутри вашей таблицы, чтобы не допустить, чтобы ваш обработчик tr был достигнут.

Я также предлагаю вам использовать делегацию событий для повышения производительности.

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

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

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

Поделиться
  • 0
    Спасибо большое, мужик. Это то, что я искал!
2

Просто используйте это:

Использование :first-child и :last-child с 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

))
Поделиться
  • 0
    Я думаю, вам нужно удалить этот последний тд в вашем селекторе, иначе ваш первый и последний дети не будут находиться в строках таблицы. Мне нравится решение, хотя.
  • 0
    Если я удаляю последний td селектор, он будет смотреть только на элементы tr, которые не являются первыми или последними в tbody, поэтому я добавляю его.
Показать ещё 2 комментария
0

Здесь скрипка для этого: первая и последняя строка теперь доступны для кликов

У меня есть первая и последняя строка, бросающая предупреждение, но это просто, чтобы дать вам представление о том, как настроить таргетинг.

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

Код ниже, вероятно, больше соответствует тому, что вы ищете. Я сделал код выше в скрипке, поэтому я просто вложил это.

$(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');
    });    
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню