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