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中call和apply方法浅谈
Sep 27 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 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实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python Pillow Image Invert
2019/01/22 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
公司财务流程之主管工作流程
2014/03/03 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
爱情保证书
2015/01/17 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫