jquery實(shí)現(xiàn)奇偶行賦值不同css值
更新時(shí)間：2012年02月17日 22:06:16 作者：
通常為了讓頁(yè)面呈現(xiàn)的更為美觀，我們喜歡在奇偶行加上不同的顏色
效果如下：
<html>
<head>
<title>jquery奇偶行css效果</title>
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
/*table中偶數(shù)行*/
.tabEven
{
background: #9d8e8b;
}
/*table中奇數(shù)行*/
.tabOdd
{
background: #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#datalist tr:even").addClass("tabEven");
$("#datalist tr:odd").addClass("tabOdd");
});
</script>
</head>
<body>
<table id="datalist">
<tr><td>第1行</td></tr>
<tr><td>第2行</td></tr>
<tr><td>第3行</td></tr>
<tr><td>第4行</td></tr>
<tr><td>第5行</td></tr>
</table>
</body>
</html>
使用jquery我們可以輕松的實(shí)現(xiàn)上面效果，代碼如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>jquery奇偶行css效果</title>
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
/*table中偶數(shù)行*/
.tabEven
{
background: #9d8e8b;
}
/*table中奇數(shù)行*/
.tabOdd
{
background: #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#datalist tr:even").addClass("tabEven");
$("#datalist tr:odd").addClass("tabOdd");
});
</script>
</head>
<body>
<table id="datalist">
<tr><td>第1行</td></tr>
<tr><td>第2行</td></tr>
<tr><td>第3行</td></tr>
<tr><td>第4行</td></tr>
<tr><td>第5行</td></tr>
</table>
</body>
</html>
相關(guān)文章
jquery實(shí)現(xiàn)textarea 高度自適應(yīng)
用jquery實(shí)現(xiàn)的textarea 高度自適應(yīng)代碼。這個(gè)動(dòng)畫(huà)效果比較流暢。適合新手學(xué)習(xí)。非常簡(jiǎn)單實(shí)用，這里推薦給小伙伴們。2015-03-03
這篇文章主要介紹了jQuery的css()方法用法,以實(shí)例形式較為詳細(xì)的分析了css()方法的幾種常見(jiàn)用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery+ajax實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了jQuery+ajax實(shí)現(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
JQuery居然沒(méi)有操作cookie相關(guān)的函數(shù)，搜了下官方有個(gè)cookie的插件。2010-04-04
jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作,涉及jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能,結(jié)合完整實(shí)例形式分析了jQuery使用jquery.cookie.js插件記錄用戶(hù)信息相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
使用jquery+CSS實(shí)現(xiàn)控制打印樣式
這篇文章主要介紹了使用jquery+CSS實(shí)現(xiàn)控制打印樣式,需要的朋友可以參考下2014-12-12
Jquery 綁定時(shí)間實(shí)現(xiàn)代碼
jquery 顯示本地時(shí)間/ 帶日期、星期/ UTC，需要的朋友可以參考下。2011-05-05
jQuery EasyUI API 中文文檔 - Documentation 文檔
jQuery EasyUI API 中文文檔 - Documentation 文檔，使用jQuery EasyUI的朋友可以參考下。2011-09-09
jQuery 連續(xù)列表實(shí)現(xiàn)代碼
你有沒(méi)有手工的編寫(xiě)過(guò)一些重復(fù)的代碼？你也覺(jué)得它們是如此的無(wú)聊吧。好了，這里有更好的解決辦法。2009-12-12