<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>无标题文档</title>
</head>
<styletype="text/css">
.a1{background-color:#B3C1F4;color:#0E30AE}
.a2{background-color:#EDF1FF;color:#0E30AE}
</style>
<scripttype="text/javascript">
<!--
functiononloadEvent(func){
varone=window.onload
if(typeofwindow.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
functionshowtable(){
vartablename=document.getElementById("table1")
vartr1=tablename.getElementsByTagName("tr")
for(vari=1;i<tr1.length;i++){
tr1[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.backgroundColor="#fff";
}
tr1[i].onmouseout=function(){
this.style.fontWeight=""
this.style.backgroundColor=""
}
if(i%2==0){
tr1[i].className="a1";
}else{
tr1[i].className="a2";
}
}
}
onloadEvent(showtable);
-->
</script>
<body>
<tablewidth="600"border="0"cellpadding="0"cellspacing="0"style="border:1pxsolid#4E5547"id="table1">
<trbgcolor="#0E30AE"style="color:#fff;">
<tdwidth="10%"height="21"background="../images/a_bg1.gif"></td>
<tdwidth="65%"background="../images/a_bg1.gif">标题</td>
<tdwidth="15%"background="../images/a_bg1.gif">发布人</td>
<tdwidth="10%"background="../images/a_bg1.gif">操作</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>wert</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>wert</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>weert</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>dg</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
发一个隔行换色，鼠标经过变色，ONMOUSEOVER变色
最新推荐文章于 2020-06-12 09:15:57 发布
本文介绍了一种使用HTML和JavaScript实现表格样式的技巧，并通过简单的鼠标悬停效果增强了用户体验。文章展示了如何设置表格背景颜色及字体颜色，并利用JavaScript添加了行高亮的功能。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
