Heim > Web-Frontend > js-Tutorial > jquery实现效果比较好的table选中行颜色_jquery

jquery实现效果比较好的table选中行颜色_jquery

WBOY
Freigeben: 2016-05-16 16:54:32
Original
1013 Leute haben es durchsucht

jquery table选中行颜色(效果更好)

复制代码 代码如下:






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

















































































js代码:
复制代码 代码如下:


<script> <BR>$(function(){ <BR>///////datagrid选中行变色与鼠标经过行变色/////////////// <BR>var dtSelector = ".list"; <BR>var tbList = $(dtSelector); <br><br>tbList.each(function() { <BR>var self = this; <BR>$("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行,行数:(1,3,5...) <BR>$("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行,行数:(2,4,6...) <br><br>// 鼠标经过的行变色 <BR>$("tr:not(:first)", $(self)).hover( <BR>function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, <BR>function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); } <BR>); <br><br>// 选择行变色 <BR>$("tr", $(self)).click(function (){ <BR>var trThis = this; <BR>$(self).find(".trSelected").removeClass('trSelected'); <BR>if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){ <BR>return; <BR>} <BR>$(trThis).addClass('trSelected'); <BR>}); <BR>}); <BR>}); <BR></script>

效果显示:
jquery实现效果比较好的table选中行颜色_jquery
标题 标题 标题 标题
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
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