Home > Web Front-end > JS Tutorial > body text

jquery achieves better table selected row color_jquery

WBOY
Release: 2016-05-16 16:54:32
Original
991 people have browsed it

jquery table selected row color (better effect)

Copy code The code is as follows:






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

















































































js code:
Copy code The code is as follows:


<script> <br>$(function(){ <br>///////datagrid selected The row changes color and the mouse passes over the row /////////////// <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"); // From standard Odd lines starting from the next line of the header line, number of lines: (1, 3, 5...) <br>$("tr:odd", $(self)).addClass("normalOddTD"); // From standard The even-numbered lines starting from the next line of the head line, number of lines: (2, 4, 6...) <br><br>// The line the mouse passes over changes color <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>// Select row changes color<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>

Effect display:
jquery achieves better table selected row color_jquery
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
标题 标题 标题 标题
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据
数据 数据 数据 数据