<!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");
tabNode.innerHTML+="<tr><td>"+username+"</td><td>"+email+"</td><td>"+age+"</td><td>" +
"<input type='button' value='删除' onclick='deleteTR(this)'/> </td></tr>";
}
function deleteTR(inputParameters) {
var trNode = inputParameters.parentNode.parentNode;
//找表格
var tabNode = document.getElementById("tabInfo");
//找索引，再删除
var trNo = trNode.rowIndex;
tabNode.deleteRow(trNo);
}
</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/81285806
今日推荐
周排行