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 事件处理示例分享
Dec 31 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
js获取url传值的方法
2015/12/18 Javascript
js实现常用排序算法
2016/08/09 Javascript
node.js实现快速截图
2016/08/27 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
使用python统计文件行数示例分享
2014/02/21 Python
Python简单进程锁代码实例
2015/04/27 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
《Python学习手册》学习总结
2018/01/17 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
使用python3构建文件传输的方法
2019/02/13 Python
python导入pandas具体步骤方法
2019/06/23 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python retrying模块的使用方法详解
2019/09/25 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
CAD制图人员的自荐信
2014/02/07 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
乔迁之喜主持词
2014/03/27 职场文书
运输服务质量承诺书
2014/03/27 职场文书
小学作文之描写天气
2019/08/15 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
解决redis批量删除key值的问题
2022/03/23 Redis