JavaScript實現(xiàn)動態(tài)表格效果
本文實例為大家分享了JavaScript實現(xiàn)動態(tài)表格效果的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>動態(tài)表格</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; /*讓所有彈性盒模型對象的子元素都有相同的長度，且忽略它們內(nèi)部的內(nèi)容*/ 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>聯(lián)系電話</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()'>保存數(shù)據(jù)</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);//創(chuàng)建5個tdfor (let i = 0; i < 5; i++) { let tdObj = document.createElement('td'); trObj.appendChild(tdObj); //創(chuàng)建input輸入框?qū)ο? let inputObj = document.createElement('input'); //設(shè)置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'; //設(shè)置輸入框?qū)挾? inputObj.style.width='80px'; //設(shè)置輸入框高度 inputObj.style.height='25px'; //設(shè)置輸入框的外邊距為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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python實現(xiàn)迪杰斯特拉算法過程解析2. Python 如何將integer轉(zhuǎn)化為羅馬數(shù)(3999以內(nèi))3. 詳解Python模塊化編程與裝飾器4. Python下使用Trackbar實現(xiàn)繪圖板5. html小技巧之td,div標(biāo)簽里內(nèi)容不換行6. Python通過format函數(shù)格式化顯示值7. python web框架的總結(jié)8. 以PHP代碼為實例詳解RabbitMQ消息隊列中間件的6種模式9. python使用ctypes庫調(diào)用DLL動態(tài)鏈接庫10. Python性能測試工具Locust安裝及使用
網(wǎng)公網(wǎng)安備