表格隔行变色,也是一个提高用户体验的js效果。
效果实现:
表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。
鼠标移入某行时变颜色,移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。
表格点击变色。便于用户选中自己想保留的项。
说明:
i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果
tables_li[i].onoff = 1; 为了实现点击变色,鼠标移入移出时,颜色不被覆盖。
上代码:
"">
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
window.onload = function(){
var tables = document.getElementById("tables");
var tables_li = tables.getElementsByTagName("tr");
var i=0;
var len = tables_li.length;
for(i=0; i tables_li[i].onoff = 1; tables_li[i].index = i; tables_li[i].style.backgroundColor = i%2?"#ace":""; tables_li[i].onmouseover = function(){ if(this.onoff == 1){ this.style.backgroundColor = "#06c"; } } tables_li[i].onmouseout = function(){ if(this.onoff == 1){ this.style.backgroundColor = this.index%2?"#ace":""; } } tables_li[i].onclick = function(){ if(this.onoff == 1){ this.onoff = 0; this.style.backgroundColor = "#069"; }else{ this.onoff = 1; this.style.backgroundColor = this.index%2?"#ace":""; } } } } cellpadding="0" cellspacing="0" id="tables">
1
内容内容
2
内容内容
3
内容内容
4
内容内容
5
内容内容
6
内容内容
7
内容内容
8
内容内容
9
内容内容
10
内容内容
更多信息请查看IT技术专栏