jQuery隔行變色與普通JS寫法的對比
更新時間:2013年04月21日 16:43:09 作者:
普通JS寫法與jQuery選擇器寫法,選擇table的行,隔一行,選擇一行,感興趣的朋友可以參考下哈,希望對你有所幫助
復(fù)制代碼 代碼如下:
<style type="text/css">
body {
font-size:12px;text-align:center;
}
#tbStu {
width:260px;border:1px solid #666;background-color:#eee;
}
#tbStu tr {
line-height:23px;
}
#tbStu tr th {
background-color:#ccc;color:#fff;
}
#tbStu .trOdd {
background-color:#fff;
}
</style>
<script src="jQuery/jquery-1.9.1.js"></script>
<script type="text/javascript">
//普通JS寫法
//window.onload = function () {
// var oTb = document.getElementById('tbStu');
// for (var i = 0; i < oTb.rows.length-1; i++) {
// if (i % 2)
// {
// oTb.rows[i].className = "trOdd";
// }
// }
//}
//jQuery選擇器寫法(選擇table的行,隔一行,選擇一行)
$(function () {
$('#tbStu tr:nth-child(even)').addClass("trOdd");
//jQuery給一個DIV復(fù)制內(nèi)容時,不需要檢測該DIV是否存在
// $('#divMain').html('這是一個檢測頁面');
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<th>學號</th><th>姓名</th><th>性別</th><th>部分</th>
</tr>
<tr>
<td>1001</td><td>張小明</td><td>男</td><td>320</td>
</tr>
<tr>
<td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1003</td><td>張三</td><td>男</td><td>150</td>
</tr>
</tbody>
</table>
</body>
您可能感興趣的文章:
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
- JS與jQuery實現(xiàn)隔行變色的方法
- jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼
- jQuery實現(xiàn)簡單隔行變色的方法
- 基于jQuery的的一個隔行變色,鼠標移動變色的小插件
- jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果示例
- jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
- jQuery實現(xiàn)的隔行變色功能【案例】
相關(guān)文章
jquery Deferred 快速解決異步回調(diào)的問題
下面小編就為大家?guī)硪黄猨query Deferred 快速解決異步回調(diào)的問題。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
基于jQuery的一個擴展form序列化到j(luò)son對象
jQuery沒有直接支持form到j(luò)son的序列化方法,目前網(wǎng)上有一個實現(xiàn)是這樣的2010-12-12
JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動態(tài)生成一棵樹,如果某一節(jié)點下目錄超過500個,IE 會提示是否允許JS腳本運行,并且目錄加載不全,大約只加載了300左右。2010-03-03
jQuery結(jié)合jQuery.cookie.js插件實現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實現(xiàn)換膚功能,結(jié)合實例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10

