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>學(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的的一個隔行變色,鼠標(biāo)移動變色的小插件
- 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實(shí)現(xiàn)代碼
在web頁面中,如果頁面較高,為了方便用戶快速地返回頂部,都會添加一個返回頂部按鈕2012-10-10jquerymobile局部渲染的各種刷新方法小結(jié)
本篇文章主要是對jquerymobile局部渲染的各種刷新方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03jQuery progressbar通過Ajax請求實(shí)現(xiàn)后臺進(jìn)度實(shí)時功能
這篇文章主要介紹了jQuery progressbar通過Ajax請求實(shí)現(xiàn)后臺進(jìn)度實(shí)時功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10