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下异步提交表单 异步跨域提交表单
Nov 17 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php短信接口代码
2016/05/13 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
jquery 通过name快速取值示例
2014/01/24 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python正则表达式和元字符详解
2018/11/29 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python代码编写计算器小程序
2020/03/30 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
环境工程毕业生自荐信
2013/11/17 职场文书
2015年实习单位评语
2015/03/25 职场文书
唐山大地震的观后感
2015/06/05 职场文书