jQuery隔行變色與普通JS寫法的對比
更新時(shí)間：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給一個(gè)DIV復(fù)制內(nèi)容時(shí)，不需要檢測該DIV是否存在
// $('#divMain').html('這是一個(gè)檢測頁面');
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<th>學(xué)號</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 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
- JS與jQuery實(shí)現(xiàn)隔行變色的方法
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery實(shí)現(xiàn)簡單隔行變色的方法
- 基于jQuery的的一個(gè)隔行變色，鼠標(biāo)移動(dòng)變色的小插件
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery實(shí)現(xiàn)隔行變色的方法分析(對比原生JS)
- jQuery實(shí)現(xiàn)的隔行變色功能【案例】
相關(guān)文章
jquery Deferred 快速解決異步回調(diào)的問題
下面小編就為大家?guī)硪黄猨query Deferred 快速解決異步回調(diào)的問題。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04
基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對象
jQuery沒有直接支持form到j(luò)son的序列化方法，目前網(wǎng)上有一個(gè)實(shí)現(xiàn)是這樣的2010-12-12
非常簡單的一句話即可實(shí)現(xiàn)，大家可以看看。2009-04-04
本篇文章主要介紹了jquery中each循環(huán)的簡單回滾操作的相關(guān)知識，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
元素選擇是一切操作的前提，jQuery中$()函數(shù)最強(qiáng)大最常用的功能之一就是使用選擇器選擇DOM元素。這里就匯總一些十分常用的jQuery選擇器。2017-02-02
下面小編就為大家?guī)硪黄O(shè)置jquery UI 控件的大小方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動(dòng)態(tài)生成一棵樹，如果某一節(jié)點(diǎn)下目錄超過500個(gè)，IE 會提示是否允許JS腳本運(yùn)行，并且目錄加載不全，大約只加載了300左右。2010-03-03
jquery獲取自定義屬性(attr和prop)實(shí)例介紹
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式2013-04-04
jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能,結(jié)合實(shí)例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實(shí)現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
圖片的展開和收縮使用jquery實(shí)現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)jquery 有所幫助2013-04-04