<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{width: 500px;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;} th,td{line-height: 35px;text-align: center;border: 1px solid gray;} </style></head><body> <label for="">姓名：</label><input type="text" id="txt1"> <label for="">年齡：</label><input type="text" id="txt2"> <label for="">住址：</label><input type="text" id="txt3"> <button id="btn">添加</button> <!-- <table> <tr> <th>姓名</th> <th>年齡</th> <th>住址</th> <th>操作</th> </tr> <tr> <td>AAA</td> <td>AAA</td> <td>AAA</td> <td><a href="#">刪除</a></td> </tr> <tr> <td>AAA</td> <td>AAA</td> <td>AAA</td> <td><a href="#">刪除</a></td> </tr> <tr> <td>AAA</td> <td>AAA</td> <td>AAA</td> <td><a href="#">刪除</a></td> </tr> <tr> <td>AAA</td> <td>AAA</td> <td>AAA</td> <td><a href="#">刪除</a></td> </tr> </table> --> <script type="text/javascript"> //獲取id var t1=document.getElementById('txt1'); var t2=document.getElementById('txt2'); var t3=document.getElementById('txt3'); var btn=document.getElementById('btn'); //創(chuàng)建table var tab=document.createElement('table'); //創(chuàng)建tr var tr=document.createElement('tr'); //創(chuàng)建th var th1=document.createElement('th'); var th2=document.createElement('th'); var th3=document.createElement('th'); var th4=document.createElement('th'); //添加th內容 th1.innerHTML='姓名'; th2.innerHTML='年齡'; th3.innerHTML='住址'; th4.innerHTML='操作'; //把th放入tr中 tr.appendChild(th1); tr.appendChild(th2); tr.appendChild(th3); tr.appendChild(th4); //把tr放入table中 tab.appendChild(tr); btn.onclick=function(){ if(t1.value==''||t1.value==''||t3.value==''){ alert('輸入框不能為空'); return; } var tr0=getTr(t1.value,t2.value,t3.value); tab.appendChild(tr0); //把表格放入body中 document.body.appendChild(tab); //輸入后清空輸入框 t1.value=''; t2.value=''; t3.value=''; }; function getTr(name,age,add,link){ //創(chuàng)建tr var tr=document.createElement('tr'); //創(chuàng)建td var td1=document.createElement('td'); var td2=document.createElement('td'); var td3=document.createElement('td'); var td4=document.createElement('td'); var a=document.createElement('a'); //添加th內容 td1.innerHTML=name; td2.innerHTML=age; td3.innerHTML=add; a.innerHTML='刪除'; a.href="#"; //添加刪除事件 a.onclick=function(){ if(confirm('是否確認刪除？')){ tab.removeChild(this.parentNode.parentNode); } }; //把td放入tr中 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); td4.appendChild(a); //把tr放入table中 return tr; } </script></body></html>
本站僅提供存儲服務，所有內容均由用戶發(fā)布，如發(fā)現有害或侵權內容，請
點擊舉報。
