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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
JS同步、异步、延迟加载的方法
May 05 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
浅谈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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
python通过post提交数据的方法
2015/05/06 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
中海讯通笔试题
2015/09/15 面试题
Internal修饰符有什么含义
2013/07/10 面试题
励志演讲稿200字
2014/08/21 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python