将文本框的内容添加到表格里的三种方法

---

简介

将如下图片中文本框的内容添加到表格里的三种方法

一、第一种方法

层层创建tr,td,tdText,然后将其连接起来，这里注意tbody与table之间的关系

<script>
        window.onload = function () {
            var submit = document.getElementById("addEmpButton");
            submit.onclick = function () {
                //获取文本框内容
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value
                var salary = document.getElementById("salary").value;
                //需要将获取到的信息保存到tr中
                // <tr>
                //     <td>Tom</td>
                //     <td>tom@tom.com</td>
                //     <td>5000</td>
                //     <td><a href="javascript:;">Delete</a></td>
                // </tr>
                //创建一个tr
                var tr = document.createElement("tr");
                //创建四个td
                var nameTD = document.createElement("td");
                var emailTD = document.createElement("td");
                var salaryTD = document.createElement("td");
                var aTD = document.createElement("td");
                //创建一个a元素
                var a = document.createElement("a");
                //创建文本节点
                var nameText = document.createTextNode(name);
                var emailText = document.createTextNode(email);
                var salaryText = document.createTextNode(salary);
                var delText = document.createTextNode("Delete");
                //认亲
                nameTD.appendChild(nameText);
                emailTD.appendChild(emailText);
                salaryTD.appendChild(salaryText);
                a.appendChild(delText);
                aTD.appendChild(a);
                //将td添加到tr中
                tr.appendChild(nameTD);
                tr.appendChild(emailTD);
                tr.appendChild(salaryTD);
                tr.appendChild(aTD);
                //像a中添加href属性
                a.href = "javascript:;"
                //获取table
                var employeeTable = document.getElementById("employeeTable");
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //将tr添加到table中
                tbody.appendChild(tr);
                a.onclick = DelA;
            };
        };

二、第二种方法

//创建一个tr
                var tr = document.createElement("tr");
                //设置tr中的内容
					tr.innerHTML = "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>";
                //在这种方法中没有a 得重新创建a
                var a = tr.getElementsByTagName("a")[0];  
                a.onclick = DelA;
                //获取table
                var employeeTable = document.getElementById("employeeTable");
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //将tr添加到table中
                tbody.appendChild(tr);

三、第三种方法

将第二种方法的tbody.appendChild(tr);直接改成

tbody.innerHTML +="<tr>"+
                    "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>"
                    "</tr>";

总结

第二种方法最佳，第三种方法一定不要用，它会将之前设置的Delete超链接失效，就相当于全重来了，第一种方法过于麻烦。