Home >
Article > Web Front-end > Jquery implements alternating table color changes when the mouse moves over the color change example_jquery
Jquery implements alternating table color changes when the mouse moves over the color change example_jquery
WBOYOriginal
2016-05-16 17:24:051481browse
Jquery implements alternating table colors. Click to select a row and move the mouse over the color change effect as follows: Source code (Demo) package download html code is as follows:
$(document).ready(function(){ ///////Datagrid selected row changes color and mouse passes over the row /////////////// / var dtSelector = ".list"; var tbList = $(dtSelector);
tbList.each(function() { var self = this; $( "tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // Odd-numbered lines starting from the next line of the header line, number of lines: (1, 3, 5... ) $("tr:odd", $(self)).addClass("normalOddTD"); // Even-numbered lines starting from the next line of the header line, number of lines: (2, 4, 6... )
//The line the mouse passes over changes color $("tr:not(:first)", $(self)).hover( function () { $(this).addClass ('hoverTD');$(this).removeClass('table-td-content'); }, function () { $(this).removeClass('hoverTD');$(this).addClass( 'table-td-content'); } );
//Select row changes color $("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'); }); }); });
Statement：
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
