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文件 document.createElement
Oct 14 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
window.onload使用指南
Sep 13 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
优化PHP代码的53条建议
2008/03/27 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Python中表示字符串的三种方法
2017/09/06 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Python虚拟环境venv用法详解
2020/05/25 Python
virtualenv介绍及简明教程
2020/06/23 Python
HTML5标签大全
2016/11/23 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
个人授权委托书范本
2014/04/03 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android