JS实现的样式切换功能tableCSS实例


Posted in Javascript onDecember 30, 2016

本文实例分析了JS实现的样式切换功能tableCSS。分享给大家供大家参考,具体如下:

把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果

代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式

function TableCss(options){
  //如果没参数,就退出
  if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;}
  //参数及默认参数
  var options = {
    tableName : options.tableName,
    evenClass : options.evenClass || "tr_even",
    oddClass : options.oddClass || "tr_odd",
    clickClass : options.clickClass || "tr_click",
    hoverClass: options.hoverClass || "tr_hover"
    }
  //根据ID找到表格元素
  var tableName = document.getElementById(options.tableName);
  var tr = tableName.getElementsByTagName("tr");
  //对TR元素循环设置
  for(var i=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 ){ return false;}
        else { tr[k].className = options.hoverClass;}
      }
      tr[k].onmouseout = function(){
        if(tr[k].className == options.clickClass){ return false;}
        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,
#tb1 td{ border:1px solid #000;border-collapse:collapse}
.tr_even { background:#CCC;}
.tr_odd { background:#9FF;}
.tr_hover { background:#FF6;}
.tr_click { background:#00F;}
-->
</style>
<table id="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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
浅谈js script标签中的预解析
Dec 30 #Javascript
jQuery实现页面顶部下拉广告
Dec 30 #Javascript
jQuery Password Validation密码验证
Dec 30 #Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 #Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 #Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 #Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 #Javascript
You might like
PHP校验ISBN码的函数代码
2011/01/17 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
python放大图片和画方格实现算法
2018/03/30 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
python os.rename实例用法详解
2020/12/06 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
工作的心得体会
2013/12/31 职场文书
初中语文教学反思
2014/02/02 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
运动会演讲稿50字
2014/08/25 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
2014年党支部工作总结
2014/11/13 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
跳高加油稿
2015/07/21 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python