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個tdfor (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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)2. javascript設計模式 ? 建造者模式原理與應用實例分析3. Python使用oslo.vmware管理ESXI虛擬機的示例參考4. IDEA EasyCode 一鍵幫你生成所需代碼5. Java構建JDBC應用程序的實例操作6. 一篇文章帶你了解JavaScript-對象7. IntelliJ IDEA設置條件斷點的方法步驟8. Express 框架中使用 EJS 模板引擎并結合 silly-datetime 庫進行日期格式化的實現方法9. python flask框架快速入門10. 解決Python paramiko 模塊遠程執行ssh 命令 nohup 不生效的問題
網公網安備