表格添加 · Javascript

![](https://box.kancloud.cn/23666ea5fab7dc64e3488b5b9cc8e584_684x483.gif) ``` <style> table,th,td{ border:1px solid #333; border-collapse: collapse; /* 邊框折疊，默認邊框有一定寬度 */ } table{ width: 500px; line-height: 50px; text-align: center; } div{ margin-top: 30px; margin-bottom: 30px; } </style> </head> <body> <div> <input type="text" id="shop"> <input type="text" id="cell"> <button id="add">添加</button> </div> <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> var table = document.getElementById("table"); var rows = table.tBodies[0].rows; table.tHead.style.background = "#abcdef"; background(); 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; var td1 = document.createElement("td"); td1.innerHTML = cellValue; //如果內容為空則點擊添加按鈕無效 if(shopValue != "" || cellValue != ""){ tr.appendChild(td); tr.appendChild(td1); table.tBodies[0].appendChild(tr); } else{ ; } var rows = table.tBodies[0].rows; table.tHead.style.background = "#abcdef"; background(); } function background(){ for(var i=0;i<rows.length;i++){ if(i%2==0){ rows[i].style.background = "#fedcba"; } else{ rows[i].style.background = "#cbafed"; } } } </script> ```