JavaScript實現動態表格效果
本文實例為大傢分享瞭JavaScript實現動態表格效果的具體代碼,供大傢參考,具體內容如下
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態表格</title> <style> .bigDiv{ width: 600px; margin: 50px auto; } table{ border: solid black 2px; width: 500px; /*邊框會合並為一個單一的邊框*/ border-collapse: collapse; } th{ background-color: darkgray; /*表頭字體加粗*/ font-weight: bold; /*字體顏色 #ffffff:白色*/ color: #ffffff; } th,td{ border: 1px solid black ; /*指定的寬度和高度的行為。指定元素的寬度和高度(最小/最大屬性)適用於box的寬度和高度*/ box-sizing: content-box; text-align: center; /*指定寬高*/ width: 50px; height: 30px; font-size: 14px; } .but{ width: 150px; margin: 5px 400px; /*讓所有彈性盒模型對象的子元素都有相同的長度,且忽略它們內部的內容*/ display: flex; /*在彈性盒對象的 <div> 元素中的各項周圍留有空白*/ justify-content: flex-end; } </style> </head> <body> <div class="bigDiv"> <table align="center"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>聯系電話</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>逍遙</td> <td>18</td> <td>男</td> <td>12354546</td> </tr> <tr> <td>2</td> <td>小白</td> <td>19</td> <td>女</td> <td>252323523</td> </tr> </tbody> </table> <div class="but"> <button type="button" onclick="addRow()">添加一行</button> <button type="button" onclick="saveData()">保存數據</button> </div> </div> <script> var id; var name; var age; var sex; var phone; var tdArr=new Array(); function addRow() { let tbodyObj = document.getElementsByTagName("tbody")[0]; let trObj = document.createElement("tr"); tbodyObj.appendChild(trObj); //創建5個td for (let i = 0; i < 5; i++) { let tdObj = document.createElement("td"); trObj.appendChild(tdObj); //創建input輸入框對象 let inputObj = document.createElement("input"); //設置input對象的id屬性 inputObj.setAttribute("id",i); //為每一個輸入框添加一個失去焦點事件 inputObj.addEventListener("blur",function () { switch (this.id) { case "0": id=this.value; break; case "1": name=this.value; break; case "2": age=this.value; break; case "3": sex=this.value; break; case "4": phone=this.value; break; } }); //隱藏未點擊輸入時的input邊框 inputObj.style.border="0"; //隱藏點擊輸入時的邊框 inputObj.style.outline="none"; //設置輸入框寬度 inputObj.style.width="80px"; //設置輸入框高度 inputObj.style.height="25px"; //設置輸入框的外邊距為0 inputObj.style.margin="0"; //將td添加 tdObj.appendChild(inputObj); //將tdObj添加到tdArr中 tdArr.push(tdObj); } } function saveData() { tdArr[0].innerHTML=id; tdArr[1].innerHTML=name; tdArr[2].innerHTML=age; tdArr[3].innerHTML=sex; tdArr[4].innerHTML=phone; tdArr.length=0; } </script> </body> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。