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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
js函数调用的方式
May 06 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
webpack多页面开发实践
Dec 18 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
微信小程序实现评论功能
Nov 28 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
antd form表单数据回显操作
Nov 02 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
任意位置显示html菜单
2007/02/01 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
自荐书模板
2013/12/19 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
中学生评语大全
2014/04/18 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
教研活动主持词
2015/07/03 职场文书
高中美术教学反思
2016/02/17 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
学校运动会开幕词
2016/03/03 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL