文章目录
简介
将如下图片中文本框的内容添加到表格里的三种方法
一、第一种方法
层层创建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超链接失效,就相当于全重来了,第一种方法过于麻烦。