jQuery table表格奇偶行變色效果
奇偶行變色可以有效的提高表格的辨識度,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>table細線表格-螞蟻部落</title> <style type="text/css"> #thetable{ background-color:green; font-size:12px; } #thetable th{ text-align:center; background-color:#CCF; height:30px; line-height:30px; } #thetable td{ width:150px; height:30px; line-height:30px; text-align:center; } .odd{ background-color:#FFF; } .even{ background-color:#CCC; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $('#thetable tr:odd td').addClass("odd"); $('#thetable tr:even td').addClass("even"); }); </script> </head> <body> <table cellpadding="0" cellspacing="1" id="thetable"> <tr> <th>標題一</th> <th>標題二</th> <th>標題三</th> <th>標題四</th> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> <td>螞蟻部落四</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> <td>螞蟻部落四</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> <td>螞蟻部落四</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> <td>螞蟻部落四</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> <td>螞蟻部落四</td> </tr> </table> </body> </html>
以上程式碼實現了奇偶行變色效果,程式碼非常的簡單,可以參閱相關閱讀。
相關閱讀:
(1).addClass()函式可以參閱jQuery addClass()一章節。
(2).:even選擇器可以參閱jQuery :even一章節。
(3).:odd選擇器可以參閱jQuery :odd一章節。
相關文章
- 實現滑鼠懸浮table表格行背景變色效果
- jQuery表格隔行變色效果詳解jQuery
- jQuery表格隔行變色jQuery
- 表格奇偶行不同背景顏色程式碼
- JavaScript 表格隔行變色效果JavaScript
- jQuery外掛--表格隔行變色jQuery
- jQuery table表格隔行換色程式碼例項jQuery
- jQuery實現的滑鼠懸浮和選中實現表格行背景變色效果jQuery
- table表格隔行變色程式碼例項
- jQuery table表格同類內容摺疊效果jQuery
- 使用jQuery控制table表格的tr行顯示和隱藏效果jQuery
- Table tr 奇數偶數行漸變色Jquery實現jQuery
- 滑鼠滑過實現table表格行背景變色程式碼例項
- jQuery table表格行的新增和刪除jQuery
- jQuery table表格tr行顯示隱藏jQuery
- js table隔行變色效果程式碼例項JS
- jQuery 隔行變色效果程式碼例項jQuery
- jQuery隔行變色效果程式碼例項jQuery
- 滑鼠懸浮表格行變色程式碼
- CSS 表格隔行變色CSS
- JavaScript 點選表格行實現背景變色JavaScript
- 表格行背景交替變色例項程式碼
- jQuery操作表格table程式碼例項jQuery
- CSS滑鼠懸浮行背景變色效果CSS
- 實現table細線表格效果程式碼
- JavaScript隔行變色效果JavaScript
- CSS表格隔行變色詳解CSS
- jQuery設定奇偶行背景色程式碼jQuery
- JavaScript刪除table表格指定行JavaScript
- 如何使用jQuery建立彩色條紋表格效果?jQuery
- JQuery datatables 給表格新增載入中效果jQuery
- el-table滑鼠懸停變色
- 點選當前文字行實現文字變色效果
- JavaScript文字迴圈變色效果JavaScript
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- JavaScript動態為table表格新增行JavaScript
- 頁面表格怎麼實現隔行異色、隔行變色
- element-ui table表格元件實現手風琴效果UI元件