我们希望实现当鼠标移动到表格的某行时,改变它的背景色,在这里我写了一点简单的js实现:
原理很简单,调用onmouseover和onmouseout两个事件,当鼠标移到当表格上时,获取表格所在的行对象,再改变行对象的背景色,
当鼠标离开时调用onmouseout恢复原来的背景。
下面是改变颜色的js代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<script language="javascript" type="text/javascript">
// <!CDATA[
/*********** 主流浏览器类型判断 ***********/
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
/************** End *****************/
var obj;
function setSelectedRowColor(oEvent)
{
if (Sys.ie)
{
obj = oEvent.srcElement.parentElement;
if (oEvent.srcElement.tagName == "TH")
{
return;
}
}
else if (Sys.firefox)
{
obj = oEvent.target.parentNode;
if (oEvent.target.tagName == "TH")
{
return;
}
}
if (obj.tagName == "TR")
{
obj.style.backgroundColor = "Gray";
}
}
function backRowColor(oEvent)
{
if (Sys.ie)
{
obj = oEvent.srcElement.parentElement;
if (oEvent.srcElement.tagName == "TH")
{
return;
}
}
else if (Sys.firefox)
{
obj = oEvent.target.parentNode;
if (oEvent.target.tagName == "TH")
{
return;
}
}
if (obj.tagName == "TR")
{
obj.style.backgroundColor = "white";
}
}
// ]]>
</script> 页面内容,如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<table id="data" class="style1" onmouseover="setSelectedRowColor(event);"
onmouseout="backRowColor(event);"
cellspacing="0">
<tr style="background:green;">
<th>
a</th>
<th>
b</th>
<th>
c</th>
</tr>
<tr>
<td>
d</td>
<td>
d</td>
<td>
h</td>
</tr>
<tr>
<td>
f</td>
<td>
e</td>
<td>
g</td>
</tr>
</table>
在这里如果用jQuery做的话就更简单了,
隔行变色处理:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
function changeInterleaveColor(id)
{
$("#" + id + " tr:even").attr("class", "normalEvenTr"); //奇数行
$("#" + id + " tr:first").attr("class", "t_h"); //标题
$("#" + id + " tr:not(#" + id + " tr:first)").hover(
function()
{
this.className = "hoverTr";
}
, function()
{
if (this.rowIndex % 2 == 0)
{
this.className = "normalEvenTr";
}
else
{
this.className = "normalOddTr";
}
});
}
原理很简单,调用onmouseover和onmouseout两个事件,当鼠标移到当表格上时,获取表格所在的行对象,再改变行对象的背景色,
当鼠标离开时调用onmouseout恢复原来的背景。
下面是改变颜色的js代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript" type="text/javascript">
// <!CDATA[
/*********** 主流浏览器类型判断 ***********/
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
/************** End *****************/
var obj;
function setSelectedRowColor(oEvent)
{
if (Sys.ie)
{
obj = oEvent.srcElement.parentElement;
if (oEvent.srcElement.tagName == "TH")
{
return;
}
}
else if (Sys.firefox)
{
obj = oEvent.target.parentNode;
if (oEvent.target.tagName == "TH")
{
return;
}
}
if (obj.tagName == "TR")
{
obj.style.backgroundColor = "Gray";
}
}
function backRowColor(oEvent)
{
if (Sys.ie)
{
obj = oEvent.srcElement.parentElement;
if (oEvent.srcElement.tagName == "TH")
{
return;
}
}
else if (Sys.firefox)
{
obj = oEvent.target.parentNode;
if (oEvent.target.tagName == "TH")
{
return;
}
}
if (obj.tagName == "TR")
{
obj.style.backgroundColor = "white";
}
}
// ]]>
</script>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<table id="data" class="style1" onmouseover="setSelectedRowColor(event);"
onmouseout="backRowColor(event);"
cellspacing="0">
<tr style="background:green;">
<th>
a</th>
<th>
b</th>
<th>
c</th>
</tr>
<tr>
<td>
d</td>
<td>
d</td>
<td>
h</td>
</tr>
<tr>
<td>
f</td>
<td>
e</td>
<td>
g</td>
</tr>
</table>
在这里如果用jQuery做的话就更简单了,
a | b | c |
---|---|---|
d | d | h |
f | e | g |
f | e | g |
$(function() { $("#data tr:even").css("background-color","#E5F3F6"); } )
***最终表格隔行变色和鼠标移到变色,通过与css定义联系起来,将样式写在模式表中![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function changeInterleaveColor(id)
{
$("#" + id + " tr:even").attr("class", "normalEvenTr"); //奇数行
$("#" + id + " tr:first").attr("class", "t_h"); //标题
$("#" + id + " tr:not(#" + id + " tr:first)").hover(
function()
{
this.className = "hoverTr";
}
, function()
{
if (this.rowIndex % 2 == 0)
{
this.className = "normalEvenTr";
}
else
{
this.className = "normalOddTr";
}
});
}