HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值答案

【问题标题】：HTML / CSS / Javascript - Changing one table cell value, when hovering over a different cellHTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值
【发布时间】：2013-03-06 20:11:43
【问题描述】：

我实际上没有任何与此相关的代码，因为它完全是假设的，但我只是想知道它会多么简单。

比如说，我有一个包含 4 个单元格的标准表格。

<html>
    <head></head>
    <body>
        <table>
            <tr>
                <td>Cell 1</td>
            </tr>
            <tr>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
            </tr>
            <tr>
                <td>Cell 4</td>
            </tr>
        </table>
    </body>
</html>

现在我想将鼠标悬停在单元格 2 上并在单元格 3 中显示图像...这可以使用 JavaScript 吗？

【问题讨论】：

是 jQuery 的替代品吗？
在JS中当然可以。到目前为止，您尝试过什么？
你能加个jsfiddle.net
@howderek 将该表复制到 jsfiddle 中非常容易。
@Tyriar，是的，但他可能有一些我们不知道的 js。

标签： javascript html css html-table hover

【解决方案1】：

试试这个代码。请记住，这完全满足您的要求，不多也不少。如果您想要一个可维护的解决方案，您需要使用类（而不是 ID）正确扩展此代码，但这超出了本问题的范围。

<html>
    <head></head>
    <body>
        <table>
            <tr>
                <td>Cell 1</td>
            </tr>
            <tr>
                <td id="hoverover">Cell 2</td>
            </tr>
            <tr>
                <td id="changeme">Cell 3</td>
            </tr>
            <tr>
                <td>Cell 4</td>
            </tr>
        </table>
        <script>
            var hoverEl = document.getElementById('hoverover'),
                changeEl = document.getElementById('changeme');

            hoverEl.addEventListener('mouseover', function() {
                changeEl.innerHTML = '<img src="/path/to/image" />';
            }, false);
            hoverEl.addEventListener('mouseout', function() {
                changeEl.innerHTML = 'Cell 3';
            }, false);
        </script>
    </body>
</html>

【讨论】：

会破坏表格结构，innerHTML 会移除表格单元格。您可以将id 移动到td 而不是tr。
两者都试过了，都可以正常工作。这将取决于我需要在什么情况下使用它。

【解决方案2】：

这是一个更通用的纯 JavaScript 示例。它为所有td 更改下一个td 的背景。对于最后一个，它将改变第一个的背景。设置为背景图像就像将 CSS 更改为使用 background-image 而不是 background-color 一样简单。

jsFiddle

JavaScript

var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
    tds[i].onmouseover = (function (i) {
        return function () {
            tds[(i + 1) % tds.length].className = 'hovered';
        }
    })(i);
    tds[i].onmouseout = (function (i) {
        return function () {
            tds[(i + 1) % tds.length].className = '';
        }
    })(i);
}

CSS

.hovered {
    background-color:#F00;
}

【讨论】：

是的，破解了它。谢谢，以后会用这个。这是我在网站上的第一篇文章后获得的大量支持，我非常高兴！

【解决方案3】：

您可以尝试仅使用 css 来实现。至少有两个选择器可能会有所帮助。

第一个是+，第二个是nth-child()。因此，假设您总是希望在表格单元格 n+1 中显示图像，其中 n 是您悬停的单元格：

<table>
  <tr>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td><img src="yoursource.jpg"></td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td><img src="yoursource2.jpg"></td>
  </tr>
</table>

你可以这样试试：

img { display: none; }
tr:hover + tr img { display: block; }

或者您可以使用 css3 选择器创建规则：

img { display: none; }
tr:nth-child(n+1):hover + tr img { display: block; }

我想只有使用 css 才能做到这一点，但当然，它只有在代码中已经有图像的情况下才有效（如果你只想显示或加载它们，你并不精确)。

working example

【讨论】：

嗯，这是一个有趣的功能，我也会尝试并使用最合适的功能！感谢您的帮助。