JS实现的样式切换功能tableCSS实例
本文实例分析了JS实现的样式切换功能tableCSS。分享给大家供大家参考，具体如下：
把前阵子写的JQ插件函数(alterBgColor)改写成不基于JQ的代码,还添加了一个click样式效果
代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式
functionTableCss(options){
//如果没参数,就退出
if(arguments.length<1||!document.getElementById(options.tableName)){return;}
//参数及默认参数
varoptions={
tableName:options.tableName,
evenClass:options.evenClass||"tr_even",
oddClass:options.oddClass||"tr_odd",
clickClass:options.clickClass||"tr_click",
hoverClass:options.hoverClass||"tr_hover"
}
//根据ID找到表格元素
vartableName=document.getElementById(options.tableName);
vartr=tableName.getElementsByTagName("tr");
//对TR元素循环设置
for(vari=0,len=tr.length;i<len;i++){
//用了闭包
(function(k){
//设置奇偶行样式
tr[k].className=(k%2==0)?options.oddClass:options.evenClass;
//点击样式
tr[k].onclick=function(){
if(tr[k].className==options.clickClass){
tr[k].className=(k%2==0)?options.oddClass:options.evenClass;
}
else{
tr[k].className=options.clickClass;
}
}
//鼠标HOVER样式,如果已经是点击样式,则不变化
tr[k].onmouseover=function(){
if(tr[k].className==options.clickClass){returnfalse;}
else{tr[k].className=options.hoverClass;}
}
tr[k].onmouseout=function(){
if(tr[k].className==options.clickClass){returnfalse;}
else{
tr[k].className=(k%2==0)?options.oddClass:options.evenClass;
}
}
})(i)
}
}
//调用
TableCss({tableName:"tb1"});
效果很简单,代码也很简单.
只是这句tr[k].className=(k%2==0)?options.oddClass:options.evenClass;写了三遍,本来是写在一个function里的,但不知道在闭包里那么写会不会影响性能(任务管理器里也没看到有CPU使用率暴涨的情况),最后还是决定这么写,呵呵.
测试代码:
<style>
<!--
#tb1,
#tb1td{border:1pxsolid#000;border-collapse:collapse}
.tr_even{background:#CCC;}
.tr_odd{background:#9FF;}
.tr_hover{background:#FF6;}
.tr_click{background:#00F;}
-->
</style>
<tableid="tb1"cellpadding="1"cellspacing="1">
<tr>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
<td>123</td>
<td>456</td>
</tr>
</table>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。