| <!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'); //创建table var tab=document.createElement('table'); //创建tr var tr=document.createElement('tr'); //创建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){ //创建tr var tr=document.createElement('tr'); //创建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> |
|
|
