Home > Article > Web Front-end > Javascript method to realize alternating row color change in table table_javascript skills
The example in this article describes the method of using JavaScript to change the color of table tables on alternate rows. Share it with everyone for your reference. The specific implementation method is as follows:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title> <script type="text/javascript"> function SetTableColor() { var tbl = document.getElementById("tblMain"); var trs = tbl.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var j = i + 1; if (j % 2 == 0) { //偶数行 trs[i].style.background = "yellow"; } else { trs[i].style.background = "blue"; } } } </script> </head> <body onload="SetTableColor()"> <table id="tblMain" border="1"> <tr> <td>1</td> <td>三星</td> <td>AA</td> </tr> <tr> <td>2</td> <td>Norkia</td> <td>BB</td> </tr> <tr> <td>3</td> <td>苹果</td> <td>CC</td> </tr> <tr> <td>4</td> <td>联想</td> <td>DD</td> </tr> <tr> <td>5</td> <td>小米</td> <td>EE</td> </tr> <tr> <td>6</td> <td>HTC</td> <td>FF</td> </tr> </table> </body> </html>
I hope this article will be helpful to everyone’s JavaScript programming design.