dom写HTML并且实现功能案例

<!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>  <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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。