Heim > Web-Frontend > js-Tutorial > Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery

Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery

WBOY
Freigeben: 2016-05-16 17:24:05
Original
1500 Leute haben es durchsucht

Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化效果图如下:
源码(Demo)打包下载Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery 
html代码如下:

复制代码 代码如下:









align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98">

















































































table-row-1.0.js
复制代码 代码如下:

$(document).ready(function(){
///////datagrid选中行变色与鼠标经过行变色///////////////
var dtSelector = ".list";
var tbList = $(dtSelector);

tbList.each(function() {
var self = this;
$("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行,行数:(1,3,5...)
$("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行,行数:(2,4,6...)

// 鼠标经过的行变色
$("tr:not(:first)", $(self)).hover(
function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); },
function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); }
);

// 选择行变色
$("tr", $(self)).click(function (){
var trThis = this;
$(self).find(".trSelected").removeClass('trSelected');
if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){
return;
}
$(trThis).addClass('trSelected');
});
});
});
标题 标题 标题 标题
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage