js处理表格对table进行修饰


Posted in Javascript onMay 26, 2014

js处理表格

1、行颜色间隔显示
css样式:两个选择器

<style type="text/css"> 
.one{ 
background-color:#33ffcc; 
} 
.two{ 
backgound-color:#ffff66; 
} 
</style> 
<script type="text/javascript"> 
function trcolor() 
//控制间隔行颜色显示不同 
{ 
var tabNode = document.getElementsByTagName("table")[0]; 
//获取table节点 
var trs = tabNode.rows; 
//获取table中的所有的行 
for(var x=1; x<trs.length;x++) 
{ 
if(x%2 == 1) 
trs[x].className ="one"; 
else 
trs[x].className ="two"; 
} 
} //通过onload方法,在网页加载完成后,运行trcolor方法,实现表格的间隔行颜色。 
window.onload = function() 
{ 
trcolor(); 
} 
</script>

2、鼠标移动到某一行,改行颜色加亮,移开后恢复原来颜色
<style type="text/css"> 
.over{ 
background-color:##00ff00; 
} 
<style> <script type="text/javascript"> 
var name; 
function trMouse() 
{ 
var tabNode = document.getELementsByTagName("table")[0]; 
//通过for循环,对每个tr标签加上onmouseover与onmouseout属性 
for(var x=0;x<trs[x].length;x++) 
{ 
trs[x].onmouseover = function() 
{ 
name=this.className; 
this.className="over"; 
} 
tes[x].onmouseout = function() 
{ 
this.className = name; 
} 
} 
} 
</script>
Javascript 相关文章推荐
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
js实现随机点名
Jan 19 Javascript
利用jQuery实现可以编辑的表格
May 26 #Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
ie 7/8不支持trim的属性的解决方案
May 23 #Javascript
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
13个PHP函数超实用
2015/10/21 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python分布式编程实现过程解析
2019/11/08 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
什么是python的必选参数
2020/06/21 Python
PyTorch的torch.cat用法
2020/06/28 Python
区分python中的进程与线程
2020/08/13 Python
python 实现的车牌识别项目
2021/01/25 Python
迎接领导欢迎词
2014/01/11 职场文书
求职简历的自我评价
2014/01/31 职场文书
个人自我剖析材料
2014/02/07 职场文书
社区党务公开实施方案
2014/03/18 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
react中的DOM操作实现
2021/06/30 Javascript
python数字转对应中文的方法总结
2021/08/02 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js