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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 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
php at(@)符号的用法简介
2009/07/11 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php获取文件大小的方法
2014/02/26 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python发送HTTP请求的方法小结
2015/07/08 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
dpn网络的pytorch实现方式
2020/01/14 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
详解python对象之间的交互
2020/09/29 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
大学生学习生活的自我评价
2013/11/01 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
优秀会计求职信
2014/07/04 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技