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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
详解JavaScript执行模型
Nov 16 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/04/09 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
Express进阶之log4js实用入门指南
2018/02/10 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
承认错误的检讨书
2014/01/30 职场文书
家电业务员岗位职责
2014/03/10 职场文书
安全标语大全
2014/06/10 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幸福家庭事迹材料
2014/12/20 职场文书