快捷導(dǎo)航

利用JQuery和JS實現(xiàn)奇偶行背景顏色自定義效果

更新時間：2012年11月19日 15:27:05 作者：

本文將詳細介紹利用JQuery和JS實現(xiàn)奇偶行背景顏色自定義效果,需要的朋友可以參考下

JQuery實現(xiàn):

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
//可以是:$('#t1 tbody tr:even').css('background','red'); 
$('#t1 > tbody tr:even').css('background','red'); 
$('#t1 > tbody tr:odd').css('background','blue'); 
}); 
</script> 
</head> 


<body> 
<table id="t1" width="500px" align="center"> 
<tbody>  
<tr><td>aaaaaaa</td></tr> 
<tr><td>bbbbbbb</td></tr> 
<tr><td>ccccccc</td></tr> 
<tr><td>ddddddd</td></tr> 
<tr><td>eeeeeee</td></tr> 
<tr><td>fffffff</td></tr> 
<tr><td>ggggggg</td></tr> 
<tr><td>hhhhhhh</td></tr> 
</tbody> 
</table> 


</body> 
</html> 

JS實現(xiàn)：

復(fù)制代碼代碼如下:

 
<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 

<script type="text/javascript"> 
//頁面加載事件 
window.onload=function(){ 
//獲取table 
var tb1 = document.getElementById("t1"); 
//獲取table中的tbody 
var tbody = tb1.getElementsByTagName("tbody")[0]; 
//獲取tr 
var trs = tbody.getElementsByTagName("tr"); 
//根據(jù)奇、偶行顯示不同的背景顏色 
for(var i=0; i<trs.length;i++){ 
if(i%2==0){ 
trs[i].style.backgroundColor="red"; 
}else{ 
trs[i].style.backgroundColor="blue"; 
} 
} 
} 
</script> 
</head> 

<body> 
<table id="t1" width="500px" align="center"> 
<tbody> 
<tr><td>aaaaaaa</td></tr> 
<tr><td>bbbbbbb</td></tr> 
<tr><td>ccccccc</td></tr> 
<tr><td>ddddddd</td></tr> 
<tr><td>eeeeeee</td></tr> 
<tr><td>fffffff</td></tr> 
<tr><td>ggggggg</td></tr> 
<tr><td>hhhhhhh</td></tr> 
</tbody> 
</table> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

關(guān)于在Typescript中做錯誤處理的方式詳解
錯誤處理是軟件工程重要的一部分,如果處理得當,它可以為你節(jié)省數(shù)小時的調(diào)試和故障排除時間,我發(fā)現(xiàn)了與錯誤處理相關(guān)的三大疑難雜癥：TypeScript的錯誤類型,變量范圍和嵌套,讓我們逐一深入了解它們帶來的撓頭問題,感興趣的朋友可以參考下
2023-09-09
使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
這篇文章主要介紹了使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下
2014-10-10
JavaScript Reduce使用詳解
這篇文章主要介紹了JavaScript Reduce使用的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-03-03
JavaScript自定義超時API代碼實例
這篇文章主要介紹了JavaScript自定義超時API代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-04-04
微信小程序使用swiper組件實現(xiàn)層疊輪播圖
這篇文章主要為大家詳細介紹了微信小程序使用swiper組件實現(xiàn)層疊輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
原生JS實現(xiàn)HTML轉(zhuǎn)Markdown功能
這篇文章主要為大家詳細介紹了如何使用原生JS實現(xiàn)簡單的HTML轉(zhuǎn)Markdown功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04
js添加事件的通用方法推薦
下面小編就為大家?guī)硪黄猨s添加事件的通用方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JS設(shè)置隨機出現(xiàn)2個數(shù)字的實例代碼
這篇文章給大家分享基于js設(shè)置隨機出現(xiàn)2個數(shù)字的實例代碼，在文章下面給分享js產(chǎn)生隨機數(shù)的幾個用法介紹，感興趣的朋友一起看看吧
2017-07-07
深入解析ES6中的promise
ES6中的promise對象很早就聽說過，據(jù)說是為了解決我們使用回調(diào)產(chǎn)生回調(diào)地獄的問題。今天小編就帶領(lǐng)大家通過本文學(xué)習(xí)下es6中的promise，感興趣的朋友跟隨小編一起看看吧
2018-11-11
Javascript前端UI框架Kit使用指南之kitjs事件管理
本文詳細介紹了Kitjs的事件管理功能，包括普通的Dom事件、Kit如何解決問題、代碼解析、注銷事件等。需要的朋友可以參考下。
2014-11-11