随身笔记
随身笔记

表格table隔行换色以及点击整行变色

表格table隔行换色以及点击整行变色这个是很实用的表格效果

效果如图:

table1

javascript代码部分:

[code]<script language=”javascript”><!–
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName(“tr”);
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!=”1″){
this.x=”1″;
this.style.backgroundColor=d;
}else{
this.x=”0″;
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!=”1″)this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
–></script>[/code]

 

[code]<script language=”javascript”><!–
//senfe(“表格名称”,”奇数行背景”,”偶数行背景”,”鼠标经过背景”,”点击后背景”);
senfe(“changecolor”,”#f8fbfc”,”#e5f1f4″,”#ecfbd4″,”#bce774″);
–></script>[/code]

HTML代码部分:

[code]<table class=”warp_table” id=”changecolor”>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>[/code]

没有标签
首页      前端资源      css基础教程      表格table隔行换色以及点击整行变色

随身笔记

表格table隔行换色以及点击整行变色
表格table隔行换色以及点击整行变色这个是很实用的表格效果 效果如图: javascript代码部分: [code]<script language="javascript"><!-- function senfe(o,a,b,c…
扫描二维码继续阅读
2012-12-22