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的版本实现执行不同的代码
May 11 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
JSONP原理及简单实现
Jun 08 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php class类的用法详细总结
2013/10/17 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python转码问题的解决方法
2008/10/07 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
设计师求职信模板
2014/05/06 职场文书
初中家长评语和期望
2014/12/26 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
功夫熊猫观后感
2015/06/10 职场文书
开学典礼致辞
2015/07/29 职场文书
初中语文教学随笔
2015/08/15 职场文书
Python中使用ipython的详细教程
2021/06/22 Python