<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
<title>表格CRUD操作</title>
<script type="text/javascript">
function addTR() {
//1. 取三个文本框中的值
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
//2. 找表格
var tabNode = document.getElementById("tabInfo");
//3. 产生tr，td节点
var trNode = document.createElement("tr");
var usernameTdNode = document.createElement("td");
usernameTdNode.innerHTML = username;
var emailTdNode = document.createElement("td");
emailTdNode.innerHTML = email;
var ageTdNode = document.createElement("td");
ageTdNode.innerHTML = age;
var opTdNode = document.createElement("td");
opTdNode.innerHTML="<input type='button' value='删除' onclick=\"deleteTr(this);\"/>"
//4. 在td节点中添加文本节点
//5. 组织节点之间的关系
trNode.appendChild(usernameTdNode);
trNode.appendChild(emailTdNode);
trNode.appendChild(ageTdNode);
trNode.appendChild(opTdNode);
tabNode.appendChild(trNode);
}
function deleteTr(inputParameters) {
var trNode = inputParameters.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<body>
<table align="center" cellpadding="10" cellspacing="3">
<tr>
<td>姓名:<input type="text" id="username"/></td>
<td>Email:<input type="text" id="email"/></td>
<td>年龄:<input type="text" id="age"/></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/> </td>
</tr>
</table>
<br/>
<br/>
<br/>
<hr/>
<table id="tabInfo" align="center" width="500" border="1">
<tr>
<td>姓名</td>
<td>Email</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</body>
</html>练习：表格CRUD操作，类似购物车的实现
猜你喜欢
转载自blog.csdn.net/Ada_yangyang/article/details/81283797
今日推荐
周排行