主要使用document.getElemetById()、obj.appendChild()、obj.setAttribute()、document.createTextNode()、table.removeChild()等方法，具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <style> table{ text-align: center; border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" id="btn_add" value="添加" > </div> <table> <caption>第七小队</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>卡卡西</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> <tr> <td>2</td> <td>漩涡鸣人</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> <tr> <td>3</td> <td>宇智波佐助</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> <tr> <td>4</td> <td>春野樱</td> <td>女</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> </table> <script> /* 分析： 1、添加 （1）给添加按钮绑定单击事件 （2）获取文本框的内容 （3）创建tr、td，设置td的文本框的内容 （4）创建tr （5）将td添加到tr中 （6）获取table，将tr添加到table中 2、删除 （1）确定点击的是哪一个超链接 <a href="javascript:void(0);" onclick="delTr(this);"> （2）怎么删除 removeChild():通过父节点删除子节点 */ //1、获取按钮 document.getElementById("btn_add").onclick = function(){ //2、获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3、创建td，赋值td的标签体 //id的id var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name的id var td_name= document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender的td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var td_a = document.createElement("td"); var elem_a = document.createElement("a"); elem_a.setAttribute("href","javascript:void(0);"); elem_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("删除"); elem_a.appendChild(text_a); td_a.appendChild(elem_a); //4、创建tr var tr = document.createElement("tr"); //5、添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6、获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
运行结果如下：
当在输入框中输入以下内容时，点击添加按钮
输出结果为：
当点击如下图的删除功能时：
执行结果如下：
下面是上述代码的简化版本：主要是使用HTML的DOM格式的innerHTML方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <style> table{ text-align: center; border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" id="btn_add" value="添加" > </div> <table> <caption>第七小队</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>卡卡西</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> <tr> <td>2</td> <td>漩涡鸣人</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> <tr> <td>3</td> <td>宇智波佐助</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> <tr> <td>4</td> <td>春野樱</td> <td>女</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td> </tr> </table> <script> /* 分析： 1、添加 （1）给添加按钮绑定单击事件 （2）获取文本框的内容 （3）创建tr、td，设置td的文本框的内容 （4）创建tr （5）将td添加到tr中 （6）获取table，将tr添加到table中 2、删除 （1）确定点击的是哪一个超链接 <a href="javascript:void(0);" onclick="delTr(this);"> （2）怎么删除 removeChild():通过父节点删除子节点 */ //使用innerHTML添加 document.getElementById("btn_add").onclick = function() { //2、获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //获取table var talbe = document.getElementsByTagName("table")[0]; //追加一行 talbe.innerHTML += " <tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a> </td>\n" + " </tr>"; } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
