Non-Intrusive implementation, more convenient control
:
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<Title> javascript practice </title>
<Script type = "text/javascript" src = "jquery-1.8.0.min.js"> </script>
<Style type = "text/css">
Table {width: 300px ;}
Caption {background: # DCA ;}
Th {background: # FCA; width: 50% ;}
Td {text-align: center ;}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
Odd = {"background": "# EDA", "color": "#3F5"}; // odd style
Even = {"background": "# 2DA", "color": "#875"}; // even style
Odd_even ("# table_test", odd, even );
});
Function odd_even (id, odd, even ){
$ (Id). find ("tr"). each (function (index, element ){
If (index % 2 = 1)
((This).css (odd );
Else
((This).css (even );
});
}
</Script>
</Head>
<Body>
<Table id = "table_test">
<Caption> title <caption>
<Tr>
<Th> name </th>
<Th> age </th>
</Tr>
<Tr>
<Td> A </td>
<Td> B </td>
</Tr>
<Tr>
<Td> Zhang </td>
<Td> LI </td>
</Tr>
<Tr>
<Td> A </td>
<Td> B </td>
</Tr>
<Tr>
<Td> Zhang </td>
<Td> LI </td>
</Tr>
<Tr>
<Td> A </td>
<Td> B </td>
</Tr>
<Tr>
<Td> Zhang </td>
<Td> LI </td>
</Tr>
<Tr>
<Td> Zhang </td>
<Td> LI </td>
</Tr>
<Tr>
<Td> A </td>
<Td> B </td>
</Tr> </li>
</Body>
</Html>