Today, toggleClass () is a simple method to implement line-by-line color change: the code is as follows:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> line-by-line color change </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: # ebeb;
Color: #000;
}
</Style>
</Head>
<Body>
<Div id = "aaa">
<Form>
<Table id = "table" width = "50%" border = "0" cellpadding = "3" cellspacing = "1">
<Tr>
<Td width = "30" align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "checkbox" class = "check1" value = "checkbox"/> </td>
<Td> lanfeng frontend </td>
<Td> lanfeng frontend </td>
</Tr>
</Table>
</Form>
</Div>
<Script>
The first method is complicated.:
Copy codeThe Code is 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 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.
Copy codeThe Code is 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>
</Html>