快捷導(dǎo)航

javascript實(shí)現(xiàn)table表格隔行變色的方法

更新時(shí)間：2015年05月13日 15:20:04 作者：永遠(yuǎn)愛好寫程序

這篇文章主要介紹了javascript實(shí)現(xiàn)table表格隔行變色的方法,涉及javascript針對表格元素與樣式的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)table表格隔行變色的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<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) { //偶數(shù)行
   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>聯(lián)想</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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解TypeScript中枚舉的使用
枚舉是 TypeScript 中一個(gè)非常有趣且實(shí)用的特性，它可以讓我們更好地組織和管理代碼，下面就來和大家聊聊TypeScript中枚舉的具體使用吧
2023-06-06
js 自制滾動條的小例子
js 自制滾動條的小例子，需要的朋友可以參考一下
2013-03-03
JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能,涉及javascript與百度地圖接口交互進(jìn)行地址經(jīng)緯度查詢的相關(guān)操作技巧,需要的朋友可以參考下
2019-04-04
詳解自定義ajax支持跨域組件封裝
本篇文章給大家詳細(xì)分析了自定義ajax支持跨域組件封裝相關(guān)的知識點(diǎn)，對此有興趣的朋友參考學(xué)習(xí)下。
2018-02-02
簡單封裝js的dom查詢實(shí)例代碼
下面小編就為大家?guī)硪黄唵畏庋bjs的dom查詢實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
TypeScript的安裝、使用、自動編譯的實(shí)現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺的編程語言。這篇文章主要介紹了TypeScript的安裝、使用、自動編譯的實(shí)現(xiàn)方法,需要的朋友可以參考下
2020-04-04
js倒計(jì)時(shí)小實(shí)例（多次定時(shí)）
這篇文章主要介紹了js實(shí)現(xiàn)可多次定時(shí)的倒計(jì)時(shí)小實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
理解Javascript圖片預(yù)加載
這篇文章主要介紹了Javascript圖片預(yù)加載，幫助大家理解Javascript圖片預(yù)加載的實(shí)現(xiàn)原理，感興趣的小伙伴們可以參考一下
2016-02-02
判斷是否是IE6版本并給出提示升級瀏覽器
一個(gè)與瀏覽器有關(guān)的腳本，也是大家從事WEb前端編程常見的編程技巧，就是判斷瀏覽器的版本，如果發(fā)現(xiàn)版本不符合你的設(shè)計(jì)要求，就給出提示升級瀏覽器，這樣你的網(wǎng)頁會更有體驗(yàn)。
2010-06-06
深入淺析ES6 Class 中的 super 關(guān)鍵字
本文給大家收藏整理了ES6 Class 中的 super 關(guān)鍵字，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-10-10