javascript修改表格背景色实例代码分享

网络编程 2024/11/15 佚名

3 2 1

复制代码代码如下:
<html>
<script>
//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件
function selectRow(target)
{
     var sTable = document.getElementById("ServiceListTable")
     for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行
     {
         if (sTable.rows[i] != target) //判断是否当前选定行
         {
             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给页面元素添加事件对应的表格HTMLview plaincopy to clipboardprint?
</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>

表格背景色

标签：

表格背景色

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript修改表格背景色实例代码分享”

javascript修改表格背景色实例代码分享

暂无“javascript修改表格背景色实例代码分享”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

javascript修改表格背景色实例代码分享

表格背景色

javascript如何创建表格(javascript绘制表格的二种方法)

jquery全选checkBox功能实现代码(取消全选功能)

评论“javascript修改表格背景色实例代码分享”

更新动态

友情链接