将 input 里的数据通过点击按钮添加到table里面 ``` <style> *{margin: 0;padding: 0;} table,td,th{ border: 1px solid; border-collapse: collapse; } table{ width: 500px; line-height: 50px; text-align: center; } input{ margin: 50px 10px; } </style> ``` ``` <input type="text" id="shop"> <input type="text" name="" id="cell"> <button id="add">添加</button> <table id="table"> <thead> <tr> <th>商城</th><th>手机</th> </tr> </thead> <tbody> <tr> <td>天猫</td> <td>小米</td> </tr> <tr> <td>天猫</td> <td>小米</td> </tr> <tr> <td>天猫</td> <td>小米</td> </tr> <tr> <td>天猫</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> ```