HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值
Posted
技术标签:
【中文标题】HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值【英文标题】：HTML / CSS / Javascript - Changing one table cell value, when hovering over a different cell 【发布时间】：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。 【参考方案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
【讨论】：
嗯，这是一个有趣的功能，我也会尝试并使用最合适的功能！感谢您的帮助。以上是关于HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值的主要内容，如果未能解决你的问题，请参考以下文章