The first day of JavaScript learning-operation exercises

As a front-end small white, feel the front-end or pretty suitable for their own, work is also very happy. However for a JavaScript small white in the small white, I decided to study hard/(ㄒoㄒ)/~~ before also read a lot of JavaScript related materials, has been ambiguous not seriously study summary. Now the importance of the work is gradually recognized, and in the course of practice has found the endless fun of JavaScript. Start today with a summary of your notes. Come on, kid!

1. Forms:

1. Table body parity rows are assigned different colors when the page loads
2. Mouse hover, table assigns different colors according to odd and even rows

First, a simple layout of a table

<table id= "tid" ><thead><tr style= "" ><td>yes</td><td>yes</td><td> Yes</td><td>yes</td><td>yes</td></tr></thead><tbody><tr> <td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>yes </td></tr><tr><td>yes</td><td>yes</td><td>yes</td><td >yes</td><td>yes</td></tr><tr><td>yes</td><td>yes</td ><td>yes</td><td>yes</td><td>yes</td></tr><tr><td>yes </td><td>yes</td><td>yes</td><td>yes</td><td>yes</td> </tr></tbody></table>

Css:

<style>.even{text-align:center;background-color: #f6bfbc;}. Odd{text-align:center;background-color: #80aba9;} </style>

Table body parity rows are assigned different colors when the page loads

Method One, change the background color through the script style window.onload=function () {var Tid=document.getelementbyid ("Tid"); var tb= Tid.getelementsbytagname ("tbody") [0];var trs=tb.getelementsbytagname ("tr"); for (i=0;i<trs.length; i++) {if (i%2 = = 0) trs[i].style.backgroundcolor= "#80aba9"; elsetrs[i].style.backgroundcolor= "#f6bfbc";};} Method Two, change the background color by adding class window.onload=function () {var Tid=document.getelementbyid ("Tid"); var tb= Tid.getelementsbytagname ("tbody") [0];var trs=tb.getelementsbytagname ("tr"); for (i=0;i<trs.length;i++) {if (i%2= =0) trs[i].classname= "even"; Elsetrs[i].classname= "odd";}} Method two simplifies the method Window.onload=function () {var Tid=document.getelementbyid ("Tid"), var tb=tid.getelementsbytagname ("Tbody ") [0];var trs=tb.getelementsbytagname (" tr "); for (i=0;i<trs.length;i++) {trs[i].classname= (i%2==0)?" Even ":" Odd ";}}

Mouse hover, table assigns different colors according to odd and even rows

Method One: Add the style window.onload=function () {var Tid=document.getelementbyid ("Tid"), var tb=tid.getelementsbytagname ("Tbody ") [0];var trs=tb.getelementsbytagname (" tr "); for (i=0;i<trs.length;i++) {if (i%2==0) {trs[i].onmouseover=function () {this.style.backgroundcolor= "red";} Trs[i].onmouseout=function () {this.style.backgroundcolor= "" "}}else{trs[i].onmouseover=function () { This.style.backgroundcolor= "Green";} Trs[i].onmouseout=function () {this.style.backgroundcolor= "" "}}}}//Method Two: Change Classwindow.onload=function () {var tid= document.getElementById ("Tid"), var tb=tid.getelementsbytagname ("Tbody") [0];var trs=tb.getelementsbytagname ("tr") ; for (i=0;i<trs.length;i++) {if (i%2==0) {trs[i].onmouseover=function () {this.classname= "odd";} Trs[i].onmouseout=function () {this.classname= "";}} Else{trs[i].onmouseover=function () {this.classname= "even";} Trs[i].onmouseout=function () {this.classname= "";}}}}

2, check box select all:

First, the simple layout

<input type= "checkbox" id= "All" onclick= "Checkall ()" > select all </br><input type= "checkbox" name= "Check" > Yes</br><input type= "checkbox" name= "Check" >yes</br><input type= "checkbox" name= "Check" > Yes</br><input type= "checkbox" name= "Check" >yes</br><input type= "checkbox" name= "Check" > Yes</br>

function Checkall () {var All=document.getelementbyid ("All"), Var check=document.getelementsbyname ("Check"); for (i=0; 1<check.length;i++) {check[i].checked=all.checked;}}

The first day of JavaScript learning-operation exercises