JavaScript - 如何在鼠标悬停/鼠标移出时同时更改 TR 中所有 TD 的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6926167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript - How can I change the background color on all TDs in a TR at the same time on Mouseover/Mouseout?
提问by Warwick
When I mouseoverone TD in a row I want all the TDs to change background color at the same time, then reverse on mouseout.
当我mouseover连续一个 TD 时，我希望所有 TD 同时更改背景颜色，然后在mouseout.
How do I do this?
我该怎么做呢？
回答by Flambino
In CSS you could do
在 CSS 你可以做
tr td { background-color: white }
tr:hover td { background-color: black };
or just
要不就
tr { background-color: white }
tr:hover { background-color: black };
if the tds don't have their own background color.
如果 tds 没有自己的背景颜色。
Both should make the row black on mouseover, and white otherwise.
两者都应在鼠标悬停时将行设为黑色，否则为白色。
You could also do it in Javascript of course, but that isn't necessary (except for IE6, which doesn't understand the :hoverpseudo-class on anything but <a>tags)
当然，您也可以在 Javascript 中执行此操作，但这不是必需的（IE6 除外，它除了标签之外:hover什么都不理解伪类<a>）
回答by James Allardice
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].onmouseover = function() {
this.parentNode.style.backgroundColor = "#ff0000";
}
tds[i].onmouseout = function() {
this.parentNode.style.backgroundColor = "#fff";
}
}
This actually changes the background colour of the parent tr, not each td, but it could be easily modified to do so. You could also attach the events to the trelements instead of the tdelements, and then you wouldn't have to use parentNode, but I don't know whether you need to do other stuff in the event handler specifically related to the td.
这实际上改变了 parent 的背景颜色tr，而不是 each td，但可以很容易地修改它。您还可以将事件附加到tr元素而不是td元素，然后您就不必使用parentNode，但我不知道您是否需要在事件处理程序中执行与td.
回答by Phani CR
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th></th>
<th>Water</th>
<th>Air</th>
<th>Fire</th>
<th>Earth</th>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Spring thunderclouds</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Roasting chestnuts</td>
<td>No</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Winter snowbanks</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Ice cream on a hot summer day</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
<script type="text/javascript">
// Specify the normal table row background color
// and the background color for when the mouse
// hovers over the table row.
var TableBackgroundNormalColor = "#ffffff";
var TableBackgroundMouseoverColor = "#9999ff";
// These two functions need no customization.
function ChangeBackgroundColor(row) {
row.style.backgroundColor = TableBackgroundMouseoverColor;
}
function RestoreBackgroundColor(row) {
row.style.backgroundColor = TableBackgroundNormalColor;
}
</script>
回答by feeela
I don't know what your exact use-case is, but for such tasks I would stick to CSS only:
我不知道您的确切用例是什么，但对于此类任务，我只会坚持使用 CSS：
td {
background: #f00; }
tr:hover td {
background: #fc0; }
回答by Johan
<td onmouseover="changeColorTo(this.parentNode, put color here)" onmouseout="changeColorTo(this.parentNode, put color here)">
...
<script>
function changeColorTo(parent, color)
{
var i, tdArray = parent.getElementsByTagName('td');
for(i in tdArray)
{
tdArray[i].style.backgroundColor = color;
}
}
</script>
This is faster than using jQuery, also, not everybody uses jQuery.
这比使用 jQuery 快，而且不是每个人都使用 jQuery。
回答by Vasil Nikolov
<style type="text/css">
.table1 tr:hover td{
background-color:#ccc;
}
</style>
<table class="table1">
<tr>
<td>cell 1-1</td>
<td>cell 1-2</td>
<td>cell 1-3</td>
<td>cell 1-4</td>
</tr>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
<td>cell 2-4</td>
</tr>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
<td>cell 2-4</td>
</tr>
</table>
回答by Muleskinner
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
You can use code like this:
你可以使用这样的代码：
HTML
HTML
<table>
<tr>
<td>cell1,1</td>
<td>cell1,2</td>
<td>cell1,3</td>
</tr>
<tr>
<td>cell2,1</td>
<td>cell2,2</td>
<td>cell2,3</td>
</tr>
</table>
Style sheet
样式表
.hover {
background-color: silver;
}
JavaScript
JavaScript
$("td").hover(
function () {
$(this).parent("tr").addClass("hover");
},
function () {
$(this).parent("tr").removeClass("hover");
}
);
The .hoverclass obviously can be styled as you like.
该.hover级显然不能为你喜欢的样式。
Regards and happy coding!
问候和快乐编码！
回答by tskuzzy
In jQuery:
在 jQuery 中：
$('td').mouseover(function( obj ) {
$(obj).parent().children().css("background-color","green");
});
$('td').mouseout(function( obj ) {
$(obj).parent().children().css("background-color","red");
});
Or in Javascript:
或者在 Javascript 中：
var tds = document.getElementsByTagName( "td" );
for( var i = 0; i < tds.length; i++ ) {
tds[i].addEventListener("mouseover",function(){
var children = this.parentNode.getElementsByTagName("td");
for( var j = 0; j < children.length; j++ )
children[j].style.background-color = "green";
});
tds[i].addEventListener("mouseout",function(){
var children = this.parentNode.getElementsByTagName("td");
for( var j = 0; j < children.length; j++ )
children[j].style.background-color = "red";
});
}
回答by ar3
回答by aroth
If you want a framework-agnostic solution, you can try this:
如果你想要一个与框架无关的解决方案，你可以试试这个：
function highlightCells(tableRow) {
for (var index = 0; index < tableRow.childNodes.length; index++) {
var row = tableRow.childNodes[index];
if (row.style) {
row.style.backgroundColor = "red";
}
}
}
function unhighlightCells(tableRow) {
for (var index = 0; index < tableRow.childNodes.length; index++) {
var row = tableRow.childNodes[index];
if (row.style) {
row.style.backgroundColor = "white";
}
}
}
Example: http://jsfiddle.net/9nh9a/
示例：http: //jsfiddle.net/9nh9a/
Though practically speaking, wouldn't it be simpler to just bind your listener to the <tr>elements instead of the <td>elements? Is there some reason you want to listen only on the <td>elements?
尽管实际上，将您的听众绑定到<tr>元素而不是元素不是更简单<td>吗？你有什么理由只想听<td>元素吗？
