Home > Developer > JavaScript
This article describes the JavaScript implementation of the table interval color and the choice to highlight (and dynamically switch data) methods. Share to everyone for your reference. The implementation methods are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>table interval color and select highlight (and dynamic switch data) </title> <script type=" Text/javascript "> var DATAS1 = {"Li Mo": "Graduated from Qinghua University", "Zhou Ping": "Graduated from Peking University", "Rhoda": "Graduated from the Universities of Harbin", "Zhengdo": "Graduated from Henan universities", "Wang Tian Kai": "Graduated from Hunan University"}; var Datas2 = {"triple": "Http://www.3lian.net", "Sohu": "Http://www.souhu.com", "CSDN Programmer development Website": "Http://www.csdn.net", "Baidu": " Http://www.baidu.com "," NetEase ":" Http://www.163.com "}; function Toggledata () {var btn = document.getElementById ("Btntoggle"); if (Btn.value = "Data 1") {LoadData (DATAS1, "Data 2"); else {loaddata (DATAS2, "Data 1");}} function LoadData (datas,btnvalue) {var tblmain = document.getElementById ("Tblmain");//empty table data var TRS = Tblmain.getel Ementsbytagname ("tr"); var trslen = trs.length; The length of the TRS must first be stored in a variable for (var i = 0; i < Trslen; i++) {tblmain.deleterow (0);} var nindex = 0; for (var key in Datas) {var tr = tblmain.insertrow ( -1); tr.onmouseover = trmouseover; tr.onmouseout = Trmouseout; var td1 = Tr.insertcell (-1); td1.innerhtml = key; var td2 = Tr.insertcell (-1); td2.innerhtml = Datas[key]; if (nindex% 2 = 0) {//set interval color Tr.style.background = "Yellow";} else {tr.style.background = "white";} nindex++; var btn = document.getElementById ("Btntoggle"); Btn.value = Btnvalue; function Trmouseover () {var tblmain = document.getElementById ("Tblmain");//Empty data var TRS = Tblmain.getelementsbytagname ("tr"); for (var i = 0; i < trs.length. i++) {if (this = = Trs[i]) {trs[i].style.background = "green";}}} function Trmouseout () {var tblmain = document.getElementById ("Tblmain"); var trs = Tblmain.getelementsbytagname ("tr"); f or (var i = 0; i < trs.length i++) {if (i% 2 ==0) {trs[i].style.background = "yellow";} else {trs[i].style.backgr Ound = "White"; }} function Inievent () {LoaddATA (DATAS1, "Data 2"); } </script> </head> <body onload= "inievent ()" > <table id= "Tblmain" > <tbody></tbody > </table> <input type = "button" id= "Btntoggle" value= "Data 2" onclick= "Toggledata ()"/> </body> </ Html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
