jquery колеблется диапазон тд

Question

Я новичок здесь, не могу найти аналогичного ответа на то, что я хочу;Я добился прогресса и не могу идти дальше.Ниже мой разрез, он меняет цвет, когда я нахожусь между 2-м и 2-м последним TR.(первый TR - это заголовок, а последний - нижний колонтитул).Между диапазоном наведения, как его выбрать, можно включить только 2-й TD и 2-й последний TD.

$('table#tblSchoolList tr:gt(0)').hover(function(){
    ////and not the last child (.next length = 0 means last)
    if ( $(this).next().length != 0 ){
        $(this).css("background", "red");  
    }
}, function(){
    $(this).css("background", "");
})

Короче говоря, при наведении таблицы исключаются первый и последний TR и TD.

TIA.

Answer 1

Вы можете использовать .find() со следующим селектором, чтобы исключить первый и последний td с каждого tr:

$('table#tblSchoolList tr:gt(0)').hover(function() {
    if ($(this).next().length != 0) {
        $(this).find('td:not(:first-child, :last-child)').css("background", "red");  
    }
}, function() {
    $(this).find('td:not(:first-child, :last-child)').css("background", "");
});

Функция по-прежнему будет срабатывать, если мышь находится над первым и последним td с, но они не будут окрашиваться.

jsFiddle demo

Вы также можете использовать селектор со своими tr s, устраняя необходимость в выражении if:

$('table#tblSchoolList tr:not(:first-child, :last-child)').hover(function() {
    $(this).find('td:not(:first-child, :last-child)').css("background", "red");
}, function() {
    $(this).find('td:not(:first-child, :last-child)').css("background", "");
});

---

В качестве небольшой вкусности я заметил, что смог преобразовать весь ваш код jQuery в одно правило CSS (работает только в современных браузерах):

table#tblSchoolList tr ~ tr:not(:last-child):hover td ~ td:not(:last-child) {
    background: red;
}

Конечно, вы всегда можете оставить свое решение jQuery, если хотите совместимости со старыми браузерами или не можете понять, что означает приведенный выше CSS:)

jsFiddle demo

Answer 2

Вы можете попробовать использовать slice, например:

$('table#tblSchoolList tr').slice(1,-1).hover( function(){
  $(this).css("background", "red");  
}, function(){
  $(this).css("background", "");
});

Использование отрицательного числа указывает смещение от конца списка. Итак:

slice(
  1, // omit first row
  -1 // omit last row
)

Или проще:

$('table#tblSchoolList tr').slice(1,-1).hover( function(){
  $(this).toggleClass('highlight');
});

(при условии, что у вас есть класс highlight для обработки поведения цвета).

---

Редактировать: Обновлен, чтобы гарантировать, что первый и последний столбцы, а также строки, не выделены (спасибо @boltclock):

$('#foo tr').slice(1,-1).hover( function(){
  $(this).find('td').slice(1,-1).toggleClass('highlight');
});

Вот очень простой пример: http://jsfiddle.net/redler/Mgd8f/