jquery實(shí)現(xiàn)表格奇數(shù)偶數(shù)行不同樣式(有圖為證及實(shí)現(xiàn)代碼)
更新時(shí)間:2013年01月23日 16:15:33 作者:
表格奇數(shù)偶數(shù)行不同樣式,相信很多網(wǎng)友都想試試手吧,由于經(jīng)驗(yàn)上千所以只能半途而廢,為了響應(yīng)網(wǎng)友的心聲,本文整理了一些操作技巧,有圖為證,感興趣的朋友可以了解下哦
非侵入實(shí)現(xiàn),控制更方便
效果圖:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>javascript practice</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
table{width:300px;}
caption{background:#DCA;}
th{background:#FCA;width:50%;}
td{text-align:center;}
</style>
<script type="text/javascript">
$(document).ready(function(){
odd= {"background":"#EDA","color":"#3F5"};//奇數(shù)樣式
even={"background":"#2DA","color":"#875"};//偶數(shù)樣式
odd_even("#table_test",odd,even);
});
function odd_even(id,odd,even){
$(id).find("tr").each(function(index,element){
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
});
}
</script>
</head>
<body>
<table id="table_test">
<caption>標(biāo)題<caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr></li>
</body>
</html>
效果圖:

復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>javascript practice</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
table{width:300px;}
caption{background:#DCA;}
th{background:#FCA;width:50%;}
td{text-align:center;}
</style>
<script type="text/javascript">
$(document).ready(function(){
odd= {"background":"#EDA","color":"#3F5"};//奇數(shù)樣式
even={"background":"#2DA","color":"#875"};//偶數(shù)樣式
odd_even("#table_test",odd,even);
});
function odd_even(id,odd,even){
$(id).find("tr").each(function(index,element){
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
});
}
</script>
</head>
<body>
<table id="table_test">
<caption>標(biāo)題<caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>張</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr></li>
</body>
</html>
您可能感興趣的文章:
- javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
- jQuery 表格隔行變色代碼[修正注釋版]
- jquery 交替為表格添加樣式的代碼
- 基于Jquery的表格隔行換色,移動(dòng)換色,點(diǎn)擊換色插件
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
- jQuery 選擇表格(table)里的行和列及改變簡(jiǎn)單樣式
- jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
- jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
- jquery實(shí)現(xiàn)表格隔行換色效果
- jquery自定義表格樣式
相關(guān)文章
jQuery去掉字符串起始和結(jié)尾的空格(多種方法實(shí)現(xiàn))
去掉字符串起始和結(jié)尾的空格在實(shí)際應(yīng)用中時(shí)很常見的的功能,本教程以多種方法為大家介紹下去掉空格的方法,感興趣的朋友可以參考下哈2013-04-04jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能,詳細(xì)分析了jQuery遮罩層的布局、樣式及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09jquery picswitch圖片焦點(diǎn)圖展示效果
jquery pictureswitch制作圖片展示效果實(shí)現(xiàn)代碼,對(duì)于想用jquery實(shí)現(xiàn)焦點(diǎn)圖效果的朋友可以參考下。2010-05-05jQuery 1.9.1源碼分析系列(十五)動(dòng)畫處理之緩動(dòng)動(dòng)畫核心Tween
這篇文章主要介紹了jQuery 1.9.1源碼分析系列(十五)動(dòng)畫處理之緩動(dòng)動(dòng)畫核心Tween 的相關(guān)資料,需要的朋友可以參考下2015-12-12