1 interlaced color change table:
(1) core code:
<script> $(function(){ $("tbody tr:even").css("background-color","red"); $("tbody tr:odd").css("background-color","yellowgreen"); }); </script>
Get the tbody element, and the odd and even rows are set a different color.
(2) shows the effect of:
2, Select All and Select None:
(1) core code:
<script> $(function(){ $("#select").click(function(){ $("tbody input").attr("checked",this.checked); }); }); </script>
Uses of selector and setting properties, such that the first box with a consistency below.
(2) demonstration effect:
3, complete code:
(1) Interlaced Color Change:
<html> <head> <meta charset="utf-8"> <Title> Results registered form </ title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("tbody tr:even").css("background-color","red"); $("tbody tr:odd").css("background-color","yellowgreen"); }); </script> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3" id="tbl"> <Caption> Results registration table </ caption> <thead> <tr> <th align="middle" >序号</th> <th align="middle ">学号</th> <th align="middle ">姓名</th> <Th align = "middle"> usually results </ th> <Th align = "middle"> final grade </ td> <Th align = "middle"> semester total score of </ th> </tr> </thead> <tbody> <tr> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr> <tr> <td align="middle ">2</td> <td align="middle ">20100300202</td> <td align="middle ">李宁</td> <td align="middle ">90</td> <td align="middle ">88</td> <td align="middle ">89</td> </tr> <tr> <td align="middle ">3</td> <td align="middle ">20100300203</td> <td align="middle ">刘梅</td> <td align="middle ">98</td> <td align="middle ">92</td> <td align="middle ">95</td> </tr> <tr> <td align="middle ">4</td> <td align="middle ">20100300204</td> <td align="middle ">王刚</td> <td align="middle ">98</td> <td align="middle ">90</td> <td align="middle ">94</td> </tr> <tr> <td align="middle ">5</td> <td align="middle ">20100300205</td> <td align="middle ">郑军</td> <td align="middle ">90</td> <td align="middle ">85</td> <td align="middle ">87</td> </tr> <tr> <td align="middle ">6</td> <td align="middle ">20100300206</td> <td align="middle ">杨波</td> <td align="middle ">80</td> <td align="middle ">80</td> <td align="middle ">80</td> </tr> </tbody> </table> </body> </html>
(2) Select All and Select None:
<html> <head> <meta charset="utf-8"> <Title> JQ achieve Unselect Select and </ title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#select").click(function(){ $("tbody input").attr("checked",this.checked); }); }); </script> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3"> <Caption> Results registration table </ caption> <tr> <th><input type="checkbox" id="select"/></th> <th bgcolor="blanchedalmond "align="middle" >序号</th> <th bgcolor="blanchedalmond "align="middle ">学号</th> <th bgcolor="blanchedalmond "align="middle ">姓名</th> <th bgcolor="blanchedalmond "align="middle ">平时成绩</th> <th bgcolor="blanchedalmond "align="middle ">期末成绩</td> <Th bgcolor = "blanchedalmond" align = "middle"> semester total score of </ th> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td bgcolor="grey "align="middle ">2</td> <td bgcolor="grey "align="middle ">20100300202</td> <td bgcolor="grey "align="middle ">李宁</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">88</td> <td bgcolor="grey "align="middle ">89</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td align="middle ">3</td> <td align="middle ">20100300203</td> <td align="middle ">刘梅</td> <td align="middle ">98</td> <td align="middle ">92</td> <td align="middle ">95</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td bgcolor="grey "align="middle ">4</td> <td bgcolor="grey "align="middle ">20100300204</td> <td bgcolor="grey "align="middle ">王刚</td> <td bgcolor="grey "align="middle ">98</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">94</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td align="middle ">5</td> <td align="middle ">20100300205</td> <td align="middle ">郑军</td> <td align="middle ">90</td> <td align="middle ">85</td> <td align="middle ">87</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td bgcolor="grey "align="middle ">6</td> <td bgcolor="grey "align="middle ">20100300206</td> <td bgcolor="grey "align="middle ">杨波</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> </tr> </table> </body> </html>