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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 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 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
如何判断php数组的维度
2013/06/10 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JS的数组迭代方法
2015/02/05 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python Property属性的2种用法
2015/06/21 Python
Django之模型层多表操作的实现
2019/01/08 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
ORACLE第二个十问
2013/12/14 面试题
生物制药自我鉴定
2014/01/25 职场文书
求职信怎么写范文
2014/05/26 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python