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 option location 页面跳转实现代码
Dec 27 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python 自动识别并连接串口的实现
2021/01/19 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
给国外客户的邀请函
2014/01/30 职场文书
2014全国两会心得体会
2014/03/17 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
销售员态度差检讨书
2014/10/26 职场文书
教师党员个人整改措施
2014/10/27 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js