编程 Javascript

javascript实现table表格隔行变色的方法

Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table间隔色</title>
<script type="text/javascript">
function SetTableColor() {
  var tbl = document.getElementById("tblMain");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 var j = i + 1;
 if (j % 2 == 0) { //偶数行
   trs[i].style.background = "yellow";
 }
 else {
   trs[i].style.background = "blue";
 }
  }
}
</script>
</head>
<body onload="SetTableColor()">
<table id="tblMain" border="1">
<tr>
  <td>1</td>
  <td>三星</td>
  <td>AA</td>
</tr>
<tr>
  <td>2</td>
  <td>Norkia</td>
  <td>BB</td>
</tr>
<tr>
  <td>3</td>
  <td>苹果</td>
  <td>CC</td>
</tr>
<tr>
  <td>4</td>
  <td>联想</td>
  <td>DD</td>
</tr>
<tr>
  <td>5</td>
  <td>小米</td>
  <td>EE</td>
</tr>
<tr>
  <td>6</td>
  <td>HTC</td>
  <td>FF</td>
</tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

屏蔽Flash右键信息的js代码

Jan 17 Javascript

javascript 节点排序 2

Jan 31 Javascript

JavaScript 函数惰性载入的实现及其优点介绍

Aug 12 Javascript

javaScript面向对象继承方法经典实现

Aug 20 Javascript

JavaScript包装对象使用介绍

Aug 29 Javascript

javascript的propertyIsEnumerable()方法使用介绍

Apr 09 Javascript

jQuery性能优化技巧分析

Feb 20 Javascript

js控件Kindeditor实现图片自动上传功能

Jul 20 Javascript

JavaScript实现职责链模式概述

Jan 25 Javascript

Vue中使用sass实现换肤功能

Sep 07 Javascript

从零开始搭建vue移动端项目到上线的步骤

Oct 15 Javascript

JavaScript数组reduce()方法的语法与实例解析

Jul 07 Javascript

javascript模拟评分控件实现方法

May 13 #Javascript

javascript动态设置样式style实例分析

May 13 #Javascript

javascript事件冒泡实例分析

May 13 #Javascript

javascript无刷新评论实现方法

May 13 #Javascript

javascript动态创建表格及添加数据实例详解

May 13 #Javascript

javascript动态创建链接的方法

May 13 #Javascript

javascript中innerText和innerHTML属性用法实例分析

May 13 #Javascript