JS 实现双色表格实现代码


Posted in Javascript onNovember 24, 2009

JS 实现双色表格实现代码原理其实很简单:利用getElementsByTagName得到所有的<tr>元素,然后分别为奇数项和偶数项的<tr>元素添加背景颜色。
核心代码:

<script type="text/javascript" > 
function color() { 
//把表头设为紫色 
var th = document.getElementById("th"); 
th.style.background = "violet" 
//1.得到所有<tr>元素 
var trs = document.getElementsByTagName("tr"); 
var i; 
for(i = 1; i <trs.length; i++) { 
//2.改变<tr>元素的背景颜色 
if(i % 2 == 0) { 
trs[i].style.background = "yellow"; 
} else { 
trs[i].style.background = "olive"; 
} 
} 
} 
window.onload = color; 
</script>

全部代码:
<html> 
<head> 
<title>双色表格</title> 
<style type="text/css"> 
<!-- 
table { 
border:solid 1px black; 
text-align:center; 
border-spacing:0px; 
} 
th,td { 
border:solid 1px black; 
width:100px; 
} 
--> 
</style> 
<script type="text/javascript" > 
function color() { 
//把表头设为紫色 
var th = document.getElementById("th"); 
th.style.background = "violet" 
//1.得到所有<tr>元素 
var trs = document.getElementsByTagName("tr"); 
var i; 
for(i = 1; i <trs.length; i++) { 
//2.改变<tr>元素的背景颜色 
if(i % 2 == 0) { 
trs[i].style.background = "yellow"; 
} else { 
trs[i].style.background = "olive"; 
} 
} 
} 
window.onload = color; 
</script> 
</head> 
<body> 
<center> 
<table> 
<tr id="th"> 
<th>姓名</th> 
<th>科目</th> 
<th>成绩</th> 
</tr> 
<tr> 
<td>张三</td> 
<td>语文</td> 
<td>90</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>数学</td> 
<td>87</td> 
</tr> 
<tr> 
<td>李四</td> 
<td>数学</td> 
<td>68</td> 
</tr> 
<tr> 
<td>王五</td> 
<td>英语</td> 
<td>76</td> 
</tr> 
</table> 
</center> 
</body> 
</html>
Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
vue过滤器用法实例分析
Mar 15 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 #Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 #Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 #Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 #Javascript
js cookies实现简单统计访问次数
Nov 24 #Javascript
js获取图片长和宽度的代码
Nov 24 #Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php ajax 静态分页过程形式
2011/09/02 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
js格式化时间的方法
2015/12/18 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python万年历实现代码 含运行结果
2017/05/20 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python实现五子棋游戏
2019/06/18 Python
wxPython多个窗口的基本结构
2019/11/19 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
机修工岗位职责
2013/11/24 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
辩论赛新闻稿
2015/07/17 职场文书
校友会致辞
2015/07/30 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript