Rumah > hujung hadapan web > tutorial js > jquery实现效果比较好的table选中行颜色_jquery

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

WBOY
Lepaskan: 2016-05-16 16:54:32
asal
1014 orang telah melayarinya

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
标题 标题 标题 标题
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan