基于jQuery的的一個(gè)隔行變色,鼠標(biāo)移動(dòng)變色的小插件

var br_cc = (function(){
var setEffect = function(els,params){
var settings = {"c1":"#eee","c2":"#ccc","c3":"#f00"};
$.extend(settings,params);
els.each(function(i){
var self = $(this);
if(i%2==0){
this._bg = settings.c1;
}else{
this._bg = settings.c2;
}
self.css({"background-color":this._bg,"cursor":"pointer"});
self.mouseover(function(){
self.css("background-color",settings.c3);
});
self.mouseout(function(){
self.css("background-color",this._bg);
});
});
};
var cc_table = function(params){
params = params || {};
var box = params.box?$("#"+params.box):$("body").eq(0);
setEffect(box.find("tr"));
};
var cc_div = function(params){
params = params || {};
var box = params.box?$("#"+params.box):$("body").eq(0);
var els = params.tagClass?box.find("."+settings.tagClass):box.find("div");
setEffect(els);
};
return {"cc_tb":cc_table,"cc_div":cc_div};
})();
$(document).ready(function(){
br_cc.cc_tb({"box":"stu-datas-tb"});
br_cc.cc_div({"box":"stu-datas-div"});
});
使用非常簡(jiǎn)單,就不多廢話了。有需要的朋友直接拿去。別忘了頂哈。
table和div的數(shù)據(jù)表示Html結(jié)構(gòu):
<h2>table HTMLElement效果</h2>
<table>
<thead>
<tr>
<th>id</th><th>name</th><th>age</th><th>sex</th>
</tr>
</thead>
<tbody id="stu-datas-tb">
<tr>
<td>1</td><td>張三</td><td>18</td><td>男</td>
</tr>
<tr>
<td>1</td><td>張三</td><td>18</td><td>男</td>
</tr>
<tr>
<td>1</td><td>張三</td><td>18</td><td>男</td>
</tr>
<tr>
<td>1</td><td>張三</td><td>18</td><td>男</td>
</tr>
</tbody>
</table>
<h2>div HTMLElement效果</h2>
<div id="stu-datas-div">
<div class="stu_info">
<span>1</span><span>李倩</span><span>20</span><span>女</span>
</div>
<div class="stu_info">
<span>1</span><span>李倩</span><span>20</span><span>女</span>
</div>
<div class="stu_info">
<span>1</span><span>李倩</span><span>20</span><span>女</span>
</div>
<div class="stu_info">
<span>1</span><span>李倩</span><span>20</span><span>女</span>
</div>
</div>
- 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)簡(jiǎn)單隔行變色的方法
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery隔行變色與普通JS寫法的對(duì)比
- jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
- jQuery實(shí)現(xiàn)的隔行變色功能【案例】
相關(guān)文章
JQuery實(shí)現(xiàn)Table的tr上移下移功能
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)Table的tr上移下移功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)
本文主要介紹了jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03jQuery DateTimePicker 日期和時(shí)間插件示例
jQuery UI很強(qiáng)大,其中的日期選擇插件Datepicker是一個(gè)配置靈活的插件,這篇文章主要介紹了jQuery DateTimePicker 日期和時(shí)間插件示例,有興趣的可以了解一下。2017-01-01easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
下面小編就為大家?guī)?lái)一篇easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫(kù)取出數(shù)據(jù)
jquery提供了很好的ajax交互,我這里用的是直接返回字符串,用的是jquery.load方法從數(shù)據(jù)庫(kù)取出的數(shù)據(jù)2014-01-01jQuery獲取訪問(wèn)者IP地址的方法(基于新浪API與QQ查詢接口)
這篇文章主要介紹了jQuery獲取訪問(wèn)者IP地址的方法,實(shí)例分析了jQuery基于新浪API與QQ查詢接口獲取來(lái)訪者IP的相關(guān)參數(shù)傳遞與數(shù)據(jù)處理技巧,需要的朋友可以參考下2016-05-05解決IE9下JQuery發(fā)送ajax請(qǐng)求失效的方法
這篇文章介紹了解決IE9下JQuery發(fā)送ajax請(qǐng)求失效的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06jQuery無(wú)刷新上傳之uploadify簡(jiǎn)單代碼
項(xiàng)目需要實(shí)現(xiàn)一個(gè)無(wú)刷新批量文件上傳功能,仔細(xì)研究了下,發(fā)現(xiàn)JQuery 提供的Uploadify插件十分不錯(cuò),有興趣的可以了解一下。2017-01-01