Use the simple jQuery method toggleClass to implement line-by-line color change, jquerytoggleclass

Use the simple jQuery method toggleClass to implement line-by-line color change, jquerytoggleclass

Today, toggleClass () is a simple method to implement line-by-line color change: the code is as follows:

<! Doctype html> 

The first method is complex:

$(function(){$("#table tr").hover(function(){$(this).addClass("h");},function(){$(this).removeClass("h");})$("input").click(function(){if($(this).attr("checked")){$(this).closest("tr").addClass("c");}else{$(this).closest("tr").removeClass("c");}})})
The second method is relatively simple:
ToggleClass () switches between one or more classes that set or remove the selected element.
This method checks the specified classes in each element. If not, add a class. If set, delete it. This is the so-called switching effect.
However, by using the "switch" parameter, you can specify to delete only or add only classes.
$(function(){$("#table tr").hover(function(){$(this).toggleClass("h");})$("input").click(function(){var d = $(this);d.closest('tr').toggleClass("c",d.attr("checked")) ;})})</script></body>

How can I set a line-by-line color change for multiple tables on the jquery table?
It's easy. You only need to use the. each () method:
Overview:
ObjectjQuery. each (object, [callback]) is a common sample method, which can be used for example object and array.
Parameter: the first is the index of the member or array of the object, and the second is the corresponding variable or content. If you want to exit the each loop, the callback function returns false. Other return values are ignored.
You can write the results as follows:
$ ('Table'). each (function (){
$ (This). find ('tr: even'background .css ("background", "# ccc ");
$ (This). find ('tr: odd'hangzhou.css ("background", "# eee ");
});
Where, # ccc, # ddd is the required color value (which can be modified as needed)
As shown in, each table starts with a dark row, and its depth changes.




Js implements the form to change the color of the line, slide the color, click the color, with jquery also line of code
Var rowIndex =-1; // select the row subscript var colorIndex; // select the row's original background color var bgcolor; // temporarily Save the current row's original color var color1 = "# CFDFFF "; // cross color 1var color2 = "# EFEFFF"; // cross color 2var onColor = "# FFEFBF"; // var selectColor = "# FFBFFF "; // select the row color window. onload = function () {updateColor ("tb", 1) ;}// parameter (Table ID, number of rows skipped) function updateColor (id, passRow) {var tb = document. getElementById (id); for (var I = passRow; I <tb. rows. length; I ++) {v Ar row = tb. rows [I]; row. onmouseover = function () {bgcolorOver (this);} row. onmouseout = function () {bgcolorOut (this);} row. onclick = function () {rowClick (this);} if (I % 2 = 0) {row. style. backgroundColor = color1;} else {row. style. backgroundColor = color2 ;}} function bgcolorOver (obj) {if (rowIndex = obj. rowIndex) {return;} bgcolor = obj. style. backgroundColor; obj. style. backgroun DColor = onColor;} function bgcolorOut (obj) {if (rowIndex = obj. rowIndex) {return;} obj. style. backgroundColor = bgcolor;} function rowClick (obj) {if (rowIndex! = Obj. rowIndex) {if (rowIndex! =-1) {tb. rows [rowIndex]. style. backgroundColor = colorIndex;} rowIndex = obj. rowIndex; colorIndex = bgcolor; obj. style. backgroundColor = selectColor ;}< table ...... remaining full text>