Today, a concise method of Toggleclass () is used to achieve an alternate color: The code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Alternate Color </title>
<script src= "Js/jquery-1.4.2.min.js" ></script>
<style type= "Text/css" >
BODY,TABLE,TD, {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
}
. h {
Background: #f3f3f3;
Color: #000;
}
. C {
Background: #ebebeb;
Color: #000;
}
</style>
<body>
<div id= "AAA" >
<form>
<table id= "table" width= "50%" border= "0" cellpadding= "3" cellspacing= "1" >
<tr>
<TD width= "align=" "Center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/> </td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
<tr>
<TD align= "center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/></td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
<tr>
<TD align= "center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/></td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
<tr>
<TD align= "center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/></td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
<tr>
<TD align= "center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/></td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
<tr>
<TD align= "center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/></td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
<tr>
<TD align= "center" ><input type= "checkbox" name= "checkbox" class= "Check1" value= "checkbox"/></td>
<td> Cloud-dwelling community </td>
<td> Cloud-dwelling community </td>
</tr>
</table>
</form>
</div>
<script>
The first is a more complicated approach:
Copy Code code as follows:
$ (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 simpler approach:
Toggleclass () Toggles one or more classes of the selected element to be set or removed.
This method examines the class specified in each element. Adds a class if it is not present, and deletes it if it is set. This is called the switching effect.
However, by using the "switch" parameter, you can specify that only the class be deleted or added.
Copy Code code as follows:
$ (function () {
$ ("#table tr"). Hover (function () {
$ (this). Toggleclass ("H");
})
$ ("Input"). Click (function () {
var d = $ (this);
D.closest (' tr '). Toggleclass ("C", D.attr ("checked"));
})
})
</script>
</body>
