javascript修改表格背景色的示例代码

发布时间:2020-07-27编辑:脚本学堂
分享一例javascript实现的修改表格背景颜色的代码,有兴趣尝试下的朋友,可以参考学习下,对学习js脚本编程很有帮助。

本节内容:
javascript修改表格背景色的实例代码。

例子:
 

复制代码 代码示例:
<html>
<script>
//点击当前选中行时设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件
//by www.jb200.com
function selectRow(target)
{
     var sTable = document.getElementById("ServiceListTable")
     for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行
     {
         if (sTable.rows[i] != target) //判断是否当前选定行
         { // www.jb200.com
             sTable.rows[i].bgColor = "#ffffff"; //设置背景色
             sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
             sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
         }
         else
         {
             sTable.rows[i].bgColor = "#d3d3d3";
             sTable.rows[i].onmouseover = ""; //去除鼠标事件
             sTable.rows[i].onmouseout = ""; //去除鼠标事件
         }
     }
}
//移过时tr的背景色
function rowOver(target)
{
    target.bgColor='#e4e4e4';
}
//移出时tr的背景色
function rowOut(target)
{
    target.bgColor='#ffffff';
}
//恢复tr的的onmouseover事件配套调用函数
function resumeRowOver()
{
    rowOver(this);
}
//恢复tr的的onmouseout事件配套调用函数
function resumeRowOut()
{
    rowOut(this);
}  
</script>
<body>
<div style="width:50px;height:50px;background-color:Blue" onmouseover="javascript:this.style.backgroundColor='red';"
onmouseout="javascript:this.style.backgroundColor='blue'">关于最后两个函数resumeRowOver和resumeRowOut,参考之前写的通过js给页面元素添加事件对应的表格。
</div>
<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable"> 
<tr> 
<th>服务事项</th> 
<th>N</th> 
<th>状态</th> 
<th>办结</th> 
<th>资料</th> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
</table> 
</body>
</html>

>>> 您可能感兴趣的文章:
javascript实现表格行间隔显示颜色并高亮显示的简单代码
jQuery表格高亮显示选中行的四种模式
JS控制表格隔行变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js表格隔行换色(隔行变色)代码一例
js实现表格与div隔行变色的代码
Js实现表格隔行变色,鼠标经过时高亮显示的代码
js实现表格的动态显示与隐藏的代码一例
表格隔行变色的js实现代码