Question

我需要能够使用当前元素更改下一个元素/上一个元素来更改背景颜色。我怎么做。我工作的元素是TR，table row和nextSibling，previousSibling对我来说不起作用，不知道为什么？

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

这是我们精彩的标准兼容浏览器（IMHO）绝对错误的时刻之一。

为了测试，我决定单行显示我的表的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">

Benice，你的想法是正确的，但你有点想到我认为是浏览器部分的实施疏忽。我建议对跨浏览器的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 */
}

悬停下一个/上一个元素

2 个答案: