JS 實(shí)現(xiàn)雙色表格實(shí)現(xiàn)代碼
更新時(shí)間：2009年11月24日 02:15:22 作者：
通過(guò)為<tr>元素添加屬性或類(lèi)型選擇器，再通過(guò)CSS設(shè)置可以實(shí)現(xiàn)雙色表格，但如果表格很長(zhǎng)，逐個(gè)元素添加可真麻煩。而且這樣的代碼維護(hù)起來(lái)不容易。所以比較好的方式是用JS實(shí)現(xiàn)。
原理其實(shí)很簡(jiǎn)單：利用getElementsByTagName得到所有的<tr>元素，然后分別為奇數(shù)項(xiàng)和偶數(shù)項(xiàng)的<tr>元素添加背景顏色。 核心代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript" >
function color() {
//把表頭設(shè)為紫色
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>
全部代碼：
復(fù)制代碼 代碼如下:
<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() {
//把表頭設(shè)為紫色
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>成績(jī)</th>
</tr>
<tr>
<td>張三</td>
<td>語(yǔ)文</td>
<td>90</td>
</tr>
<tr>
<td>張三</td>
<td>數(shù)學(xué)</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>數(shù)學(xué)</td>
<td>68</td>
</tr>
<tr>
<td>王五</td>
<td>英語(yǔ)</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
相關(guān)文章
基于Bootstrap的UI擴(kuò)展 StyleBootstrap
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap的UI擴(kuò)展： StyleBootstrap，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了Javascript小括號(hào)“()”的多義性。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
基于JS+Canvas的lucky-canvas?抽獎(jiǎng)功能
一個(gè)基于?Js?+?Canvas?的大轉(zhuǎn)盤(pán)和九宮格和老虎機(jī)抽獎(jiǎng)，使用lucky-canvas?功能可以自由配置，多端適配的特點(diǎn)，本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹抽獎(jiǎng)方法，感興趣的朋友一起看看吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)多條件篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JS request函數(shù) 用來(lái)獲取url參數(shù)
項(xiàng)目中經(jīng)常會(huì)遇到這種問(wèn)題 下面代碼解決問(wèn)題！2010-05-05
self.attachevent is not a function的解決方法
今天一個(gè)客戶(hù)用chrome瀏覽器訪問(wèn)網(wǎng)站，他的網(wǎng)站js提示self.attachevent is not a function，這個(gè)問(wèn)題就是這個(gè)瀏覽器不支持attachevent，可以通過(guò)如下方法解決了，分享一下,需要的朋友可以參考下2017-04-04
JavaScript人臉識(shí)別技術(shù)及臉部識(shí)別JavaScript類(lèi)庫(kù)Tracking.js
人臉識(shí)別的JavaScript程序包是Face Detection，它是由Jay Salvat和Liu Liu開(kāi)發(fā)的。它是一個(gè)標(biāo)準(zhǔn)的jQuery插件，通過(guò)對(duì)提供的圖片進(jìn)行分析，返回所有找到的臉部圖像的坐標(biāo)，感興趣的朋友跟著小編一起學(xué)習(xí)js人臉識(shí)別技術(shù)及臉部識(shí)別JavaScript類(lèi)庫(kù)Tracking.js吧2015-09-09
用函數(shù)模板,寫(xiě)一個(gè)簡(jiǎn)單高效的 JSON 查詢(xún)器的方法介紹
本篇文章小編將為大家介紹，用函數(shù)模板,寫(xiě)一個(gè)簡(jiǎn)單高效的 JSON 查詢(xún)器的方法介紹，需要的朋友可以參考一下2013-04-04
js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法 js實(shí)現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法，以及js實(shí)現(xiàn)多屏單張圖片延遲加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07