<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script> window.onload=function(){ var oTab=document.getElementById("tab1"); var oName=document.getElementById("name"); var oAge=document.getElementById("age"); var oBtn=document.getElementById('btn1'); var id=oTab.tBodies[0].rows.length+1; oBtn.onclick=function(){ var oTr=document.createElement('tr'); var oTd=document.createElement('td'); oTd.innerHTML=id++; oTr.appendChild(oTd); var oTd=document.createElement('td'); oTd.innerHTML=oName.value; oTr.appendChild(oTd); var oTd=document.createElement('td'); oTd.innerHTML=oAge.value; oTr.appendChild(oTd); var oTd=document.createElement('td'); oTd.innerHTML="<a href='javascript:;'>删除</a>"; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick=function(){ oTab.tBodies[0].removeChild(this.parentNode.parentNode); } oTab.tBodies[0].appendChild(oTr); } } </script> </head> <body> 姓名：<input type="text" id="name"> 年龄：<input type="text" id="age"> <input type="button" value="添加" id="btn1"> <table id="tab1" border='1' width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>12</td> <td></td> </tr> <tr> <td>2</td> <td>李四</td> <td>34</td> <td></td> </tr> <tr> <td>3</td> <td>王五</td> <td>40</td> <td></td> </tr> <tr> <td>4</td> <td>李四</td> <td>34</td> <td></td> </tr> <tr> <td>5</td> <td>王五</td> <td>40</td> <td></td> </tr> </tbody> </table> </body> </html>