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; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); }) </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).: odd選擇器參閱jQuery :odd一章節。
(2).:even選擇器參閱jQuery :even一章節。
(3).css()方法參閱jQuery css()一章節。
相關文章
- jQuery table表格隔行換色程式碼例項jQuery
- js table隔行變色效果程式碼例項JS
- CSS 隔行變色程式碼例項CSS
- js隔行變色程式碼例項JS
- jQuery 隔行變色效果程式碼例項jQuery
- jQuery隔行變色效果程式碼例項jQuery
- jQuery實現的隔行變色程式碼例項jQuery
- 滑鼠滑過實現table表格行背景變色程式碼例項
- CSS 表格隔行變色CSS
- jQuery表格隔行變色jQuery
- js實現li元素隔行背景變色例項程式碼JS
- 表格行背景交替變色例項程式碼
- table表格美化程式碼例項
- table表格使用程式碼例項
- JavaScript 表格隔行變色效果JavaScript
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- js table表格排序程式碼例項JS排序
- table細線表格例項程式碼
- jQuery操作表格table程式碼例項jQuery
- jQuery外掛--表格隔行變色jQuery
- CSS表格隔行變色詳解CSS
- 頁面表格怎麼實現隔行異色、隔行變色
- jQuery表格隔行變色效果詳解jQuery
- js table表格操作大全程式碼例項JS
- 檢索table表格資料程式碼例項
- javascript生成指定行列table表格程式碼例項JavaScript
- javascript動態操作table表格程式碼例項JavaScript
- 刪除table表格行和列程式碼例項
- 獲取table表格有多少列程式碼例項
- table表格單元格合併程式碼例項
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- js迭代table表格的行和列程式碼例項JS
- Excel表格如何隔行填充顏色?Excel表格底色隔行填充方法教程Excel
- 支援鍵盤上下鍵的隔行變色程式碼
- jQuery table表格奇偶行變色效果jQuery
- js動態新增和刪除table表格行程式碼例項JS行程
- js 將xml轉換為table表格簡單程式碼例項JSXML
- javascript動態建立指定行與列table表格程式碼例項JavaScript