jquery實現(xiàn)奇偶行賦值不同css值
更新時間：2012年02月17日 22:06:16 作者：
通常為了讓頁面呈現(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我們可以輕松的實現(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實現(xiàn)的textarea 高度自適應代碼。這個動畫效果比較流暢。適合新手學習。非常簡單實用，這里推薦給小伙伴們。2015-03-03
這篇文章主要介紹了jQuery的css()方法用法,以實例形式較為詳細的分析了css()方法的幾種常見用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了jQuery+ajax實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JQuery居然沒有操作cookie相關的函數(shù)，搜了下官方有個cookie的插件。2010-04-04
jQuery實現(xiàn)表單動態(tài)添加與刪除數(shù)據操作示例
這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加與刪除數(shù)據操作,涉及jQuery事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了jQuery實現(xiàn)的記住帳號密碼功能,結合完整實例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了使用jquery+CSS實現(xiàn)控制打印樣式,需要的朋友可以參考下2014-12-12
jquery 顯示本地時間/ 帶日期、星期/ UTC，需要的朋友可以參考下。2011-05-05
jQuery EasyUI API 中文文檔 - Documentation 文檔
jQuery EasyUI API 中文文檔 - Documentation 文檔，使用jQuery EasyUI的朋友可以參考下。2011-09-09
你有沒有手工的編寫過一些重復的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。2009-12-12