Today, a simple method toggleClass() is used to implement interlaced color changing: the code is as follows: Copy the code The code is as follows: alternate lines Color change <br>body,table,td, { <br>font-family:Arial, Helvetica, sans-serif; <br>font-size:12px; <br>} <br>.h { <br>background:# f3f3f3; <br>color:#000; <br>} <br>.c { <br>background:#ebebeb; <br>color:#000; <br>} <br> Blue Maple Front End Blue Maple Front End< /td> Blue maple front end Blue maple front end Blue maple front end Blue maple front end ;td align="center"> Blue maple front end Blue maple front end < input type="checkbox" name="checkbox" class="check1" value="checkbox" /> Blue maple front end Blue maple front end Blue maple front end Blue maple front end Blue maple front end /table> <br><br> <br><br>The first more complicated method <br>: <br> </div> <br><strong></strong>Copy code<br><div class="codetitle"> <span> The code is as follows:<a style="CURSOR: pointer" data="28205" class="copybut" id="copybut28205" onclick="doCopy('code28205')"><u> </u>$(function() </a>{ </span>$ ("#table tr").hover(function() </div>{ <div class="codebody" id="code28205">$(this).addClass("h"); <br>},function() <br>{ <br>$(this ).removeClass("h"); <br>}) <br>$("input").click(function() <br>{ <br>if($(this).attr("checked")) <br>{ <br>$(this).closest("tr").addClass("c"); <br>} <br>else <br>{ <br>$(this).closest("tr ").removeClass("c"); <br>} <br>}) <br>}) <br><br> <br><br>The second simpler method <br>: <br> toggleClass() Toggles the setting or removal of one or more classes for selected elements. </div>This method checks the specified class in each element. Adds the class if it does not exist, or removes it if it is set. This is called a toggle effect. <br>However, by using the "switch" parameter, you can specify that only classes be removed or only added. <strong></strong><br><br><br>Copy code<br><div class="codetitle"> <span> The code is as follows:<a style="CURSOR: pointer" data="6178" class="copybut" id="copybut6178" onclick="doCopy('code6178')"><u> </u>$(function(){ </a>$(" #table tr").hover(function(){ </span>$(this).toggleClass("h"); </div>}) <div class="codebody" id="code6178">$("input").click(function(){ <br>var d = $(this); <br>d.closest('tr').toggleClass("c",d.attr("checked")) ; <br>}) <br>}) <br>