表格中的 thead tbody · javascript

tHead-->獲取 thead部分 tBodies-->獲取 tBody部分獲取的是一個類數組 rows -->獲取tr的集合添加行 ~~~ <style> table,td,th{ border:1px solid #333; border-collapse: collapse; } table{ width:500px; line-height: 50px; text-align: center; } </style> </head> <body> <table id="table"> <thead> <tr> <th>商城</th><th>手機</th> </tr> </thead> <tbody> <tr><td>Tmall</td><td>小米</td></tr> <tr><td>Tmall</td><td>小米</td></tr> <tr><td>Tmall</td><td>小米</td></tr> <tr><td>Tmall</td><td>小米</td></tr> <tr><td>Tmall</td><td>小米</td></tr> </tbody> </table> <script> /* tHead-->獲取 thead部分 tBodies-->獲取 tBody部分獲取的是一個類數組 rows -->獲取tr的集合 */ var table = document.getElementById("table"); table.tHead.style.background = "#ff2d51"; var rows = table.tBodies[0].rows; for(var i=0;i< rows.length;i++){ if(i%2==0){ rows[i].style.background = "#EEEEEE" }else{ rows[i].style.background = "#44CEF6" } } //添加行 var shop = document.getElementById("shop"); var cell = document.getElementById("cell"); var add = document.getElementById("add"); add.onclick = function(){ var shopValue = shop.value; var cellValue = cell.value; var tr = document.createElement("tr"); var td = document.createElement("td"); td.innerHTML = shopValue; tr.appendChild(td); var td1 = document.createElement("td"); td1.innerHTML = cellValue; tr.appendChild(td1); table.tBodies[0].appendChild(tr); } </script> </body> ~~~