JS achieve table and highlighting the selected row

. 1  < HTML xmlns = "the http://www.w3.org/1999/xhtml" > 
2  < head > 
. 3  < Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = GB2312"  /> 
. 4  < title > Table selected row are displayed in the specified color highlight </ title > 
. 5  < Script type = "text / JavaScript" > 
. 6  function IniEvent () {
 . 7    var TBL = document.getElementById ( " tblMain ");
 8   var TRS = tbl.getElementsByTagName ( " TR " ); // the getElementsByTagName (acquired by the element tag name) 
. 9    for ( var I =  0 ; I < trs.length; I ++ ) {
 10  TRS [I] .onclick = TrOnClick ;
 . 11    }
 12 is  }
 13 is  function TrOnClick () {
 14    var TBL = document.getElementById ( " tblMain " );
 15    var TRS =tbl.getElementsByTagName ( " TR " );
 16    for ( var I =  0 ; I < trs.length; I ++ ) {
 . 17   IF (TRS [I] ==  the this ) {   // judgment is not currently selected row 
18     TRS [I] .style.background =  " Yellow " ;
 . 19  }
 20 is   the else {
 21 is     TRS [I] .style.background =  " White " ;
 22 is  }
 23 is    }
 24 }
25 </script>
26 </head>
27 <body onload="IniEvent()">
28 <table id="tblMain" border="1" style="width:200px;border-collapse:collapse">
29 <tr>
30   <td>1</td>
31   <td>三星</td>
32   <td>AA</td>
33 </tr>
34 <tr>
35   <td>2</td>
36   <td>华为</td>
37   <td>BB</td>
38 </tr>
39 <tr>
40   <td>3</td>
41   <td>苹果</td>
<42   td>CC</td>
43 </tr>
44 <tr>
45   <td>4</td>
46   <td>联想</td>
47   <td>DD</td>
48 </tr>
49 </table>
50 </body>
51 </html>

 

Guess you like

Origin www.cnblogs.com/AsCrazy/p/11538306.html
Recommended