javascript修改表格背景色实例代码分享
2018-10-12 13:52
666 查看
<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>
您可能感兴趣的文章:
相关文章推荐
- javascript修改表格背景色实例代码分享
- 通过Java压缩JavaScript代码实例分享
- Javascript实例教程:DOM方法创建和修改表格
- javascript分页代码实例分享(js分页)
- JavaScript中实现无缝滚动、分享到侧边栏实例代码
- JS动态修改网页body的背景色实例代码
- JavaScript修改CSS属性的实例代码
- javascript分页代码实例分享(js分页)
- MyEclipse:(1)修改javascript代码行的背景色
- JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
- 分享200多个javascript代码实例
- JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
- javascript实现上传图片并预览的效果代码实例
- jQuery代码实现表格内容可编辑修改
- javascript实现划词标记+划词搜索功能代码实例
- 一个简单的JavaScript Map实例(分享)
- 5种PHP创建数组的实例代码分享
- Javascript面向对象扩展库代码分享
- .net socket客户端实例代码分享
- 分享5个有趣的 JavaScript 代码片段javascript