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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
详谈Object.defineProperty 及实现数据双向绑定
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
PHP 遍历文件实现代码
2011/05/04 PHP
php的memcached客户端memcached
2011/06/14 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
详解JS数值Number类型
2018/02/07 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python爬虫基本知识
2018/03/05 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
对python 命令的-u参数详解
2018/12/03 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
Python数据正态性检验实现过程
2020/04/18 Python
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
上课睡觉检讨书
2014/01/28 职场文书
现实表现证明材料
2015/06/19 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
表扬信范文
2019/04/22 职场文书
Python 多线程处理任务实例
2021/11/07 Python
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技