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 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
利用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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
fgetcvs在linux的问题
2012/01/15 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
vue组件学习教程
2017/09/09 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
python模块smtplib学习
2018/05/22 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python对象与引用的介绍
2019/01/24 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python configparser模块常用方法解析
2020/05/22 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
市场调研项目授权委托书范本
2014/10/04 职场文书
农民工工资保障承诺书
2015/05/04 职场文书