Наведите указатель мыши на следующий / предыдущий элемент

Question

Мне нужно иметь следующий элемент / предыдущий элемент, чтобы изменить цвет фона с текущим элементом. Как я это сделал. Элемент, над которым я работаю, это TR, строка таблицы и nextSibling, предыдущийSibling мне не подходит, не знаете почему?

Answer 1

Я думаю, у нас есть случай, когда даже "хорошие" браузеры ведут себя крайне раздражающим образом.

Возьмем, к примеру, мою следующую таблицу, где HTML выглядит следующим образом:

<table border="1">
    <thead>
    <tr id="header">
        <th>eng</th>
        <th>deu</th>
        <th>spa</th>
    </tr>
    </thead>
    <tbody>
    <tr id="row1">
        <td>one</td>
        <td>eins</td>
        <td>uno</td>
    </tr>
    <tr id="row2">
        <td>spoon</td>
        <td>der Löffel</td>
        <td>la cucharita</td>
    </tr>
    </tbody>
</table>

Когда я открываю это в Firefox, захожу в консоль и запускаю следующие фрагменты, обратите внимание на поведение nextSibling:

// My input command
document.getElementById("row1").nextSibling;
// Output from the console
<TextNode textContent="\n ">

Я где-то читал об этом, и я забыл, где именно (Quirksblog, или, возможно, из выступления PPK), поэтому я попробовал следующее:

// my input command
document.getElementById("row1").nextSibling.nextSibling;
// output from the console
<tr id="row2">

Это один из тех моментов, когда наши замечательные совместимые со стандартами браузеры делают это (ИМХО) совершенно неправильно.

Чтобы проверить, я решил выделить одну строку HTML-кода моей таблицы, следовательно (надеюсь, он будет отображаться в одной строке):

<table border="1"><thead><tr id="header"><th>eng</th><th>deu</th><th>spa</th></tr></thead><tbody><tr id="row1"><td>one</td><td>eins</td><td>uno</td></tr><tr id="row2"><td>spoon</td><td>der Löffel</td><td>la cucharita</td></tr></tbody></table>

И снова запустите мой тест:

// Hmmm, does nextSibling work _as expected_ now?
document.getElementById("row1").nextSibling;
// yep
<tr id="row2">

Бенис, ваша идея была правильной, но вы поняли, что мне нравится думать о надзоре за реализацией со стороны браузера. Я рекомендую быть очень осторожным с кросс-браузерными отношениями HTML DOM. Большинство из них работают , как ожидалось , но иногда они не работают.

Ааа, все-таки нашел статью об этом: https://developer.mozilla.org/en/Whitespace_in_the_DOM

Answer 2

Используя jQuery, вы можете применить функцию hover () и установить класс, который имеет соответствующий цвет фона для следующих и предыдущих строк. Выход из ряда убрал бы выделение из этих рядов. Чтобы быть уверенным, вы должны сбросить класс выделения во всей таблице, прежде чем применять его к любым строкам.

$('tr').hover(
     function() {
        var $this = $(this);
        $this.closest('table').find('tr').removeClass('highlight');
        $this.next('tr').addClass('highlight');
        $this.prev('tr').addClass('highlight');
        $this.addClass('highlight');
     },
     function() {
        var $this = $(this);
        $this.next('tr').removeClass('highlight');
        $this.prev('tr').removeClass('highlight');
        $this.removeClass('highlight');
     }
});

Это зависит от этого фрагмента CSS

.highlight {
    background-color: #ff8; /* or whatever color you choose */
}