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 相关文章推荐
基于jquery的分页控件(C#)
Jan 06 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
小程序页面动态配置实现方法
Feb 05 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python对json的相关操作实例详解
2017/01/04 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
存储过程的优缺点是什么
2015/01/10 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
员工工作表扬信范文
2014/01/13 职场文书
运动会方阵解说词
2014/02/12 职场文书
高一新生军训感言
2014/03/02 职场文书
赡养老人协议书
2014/04/21 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
解析Java异步之call future
2021/06/14 Java/Android