本帖最后由 赵国刚 于 2013-8-15 18:33 编辑
[code=jscript]
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>添加用户</title>
</head>
<body>
<center>
姓名:<input type="text" name="name" id="name">
email:<input type="text" name="email" id="email">
电话:<input type="text" name="phone" id="phone"><br><br>
<button id="addUser">添加</button>
<br>
<br>
<br>
<hr>
<table id="userTable" border="1" cellspacing="0" cellpadding="5">
<tr>
<td>姓名</td>
<td>email</td>
<td>电话</td>
<td> </td>
</tr>
<tr>
<td>user_1</td>
<td>email_1</td>
<td>phone_1</td>
<td><a href="deleteEmp?id=user_1">Delete</a></td>
</tr>
<tr>
<td>user_2</td>
<td>email_2</td>
<td>phone_2</td>
<td><a href="deleteEmp?id=user_2">Delete</a></td>
</tr>
</table>
</center>
</body>
<script language="JavaScript">
document.getElementById("addUser").onclick = function() {
//得到输入的值
var nameElement = document.getElementById("name").value;
// alert(nameElement);
var emailElement = document.getElementById("email").value;
// alert(emailElement);
var phoneElement = document.getElementById("phone").value;
// alert(phoneElement);
//创建td元素
var tdNameElement = document.createElement("td");
var tdNameTextElement = document.createTextNode(nameElement);
tdNameElement.appendChild(tdNameTextElement);
// alert(tdNameElement.firstChild.nodeValue)
var tdEmailElement = document.createElement("td");
var tdEmailTextElement = document.createTextNode(emailElement);
tdEmailElement.appendChild(tdEmailTextElement);
// alert(tdEmailElement.firstChild.nodeValue)
var tdPhoneElement = document.createElement("td");
var tdPhoneTextElement = document.createTextNode(phoneElement);
tdPhoneElement.appendChild(tdPhoneTextElement);
// alert(tdPhoneElement.firstChild.nodeValue)
var tdElement = document.createElement("td");
var tdAhrefElement = document.createElement("a");
tdAhrefElement.setAttribute("href", "deleteEmp?id=" + nameElement);
var deleteTextElement = document.createTextNode("Delete");
tdAhrefElement.appendChild(deleteTextElement);
tdElement.appendChild(tdAhrefElement);
// alert(tdElement.firstChild.firstChild.nodeValue)
//创建tr元素
var trElement = document.createElement("tr");
//将td加入tr
trElement.appendChild(tdNameElement);
tdElement.appendChild(tdEmailElement);
tdElement.appendChild(tdPhoneElement);
tdElement.appendChild(tdElement);
//获取table
var tableElement = document.getElementById("userTable");
//创建tbody
var tbodyElement = document.createElement("tbody");
//增加tr到tbody上
tbodyElement.appendChild(trElement);
//增加tbody到table
tableElement.appendChild(tbodyElement);
}
</script>
< /html>[/code] |
收藏
淘帖
踩
