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 tools 系列 scrollable(2)
Sep 06 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python中count函数简单的实例讲解
2020/02/06 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
python中count函数知识点浅析
2020/12/17 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
《学会待客》教学反思
2014/02/22 职场文书
食品安全责任书
2014/04/15 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书