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 相关文章推荐
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
vue请求数据的三种方式
Mar 04 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
神族 PROTOSS 概述
2020/03/14 星际争霸
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php Undefined index的问题
2009/06/01 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
五段实用的js高级技巧
2011/12/20 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python通过Pillow实现图片对比
2020/04/29 Python
哪些是python中web开发框架
2020/06/17 Python
python右对齐的实例方法
2020/07/05 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
神路信息Java面试题目
2013/03/31 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
运动会800米加油稿
2014/02/22 职场文书
大四学生个人总结
2015/02/15 职场文书
运动会报道稿大全
2015/07/23 职场文书
爱护公物主题班会
2015/08/17 职场文书
教师读书活动心得体会
2016/01/14 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL