2017-04-06 22-36-42.png
test1111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
姓名：<input type="text" id="name"/>
联系方式：<input type="text" id="email"/>
年龄：<input type="text" id="age" onkeypress="check(event)" />
<input type="button" value="添加用户" onclick="addLine()">
<br/><br/><hr/><br/>
<table id="userTable" align="center" border=1 cellspacing="0" cellpadding="5">
<tr>
<th>姓名</th>
<th>联系方式</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>Ami</td>
<td>*******2057</td>
<td>18</td>
<td>
<input type="button" value="删除" onclick="delLine(this)">
</td>
</tr>
</table>
<script>
//添加信息
function addLine(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var age = document.getElementById('age').value;
var table = document.getElementById('userTable');
var trNode = document.createElement('tr');
var tdNode1 = document.createElement('td');
var textNode1 = document.createTextNode(name);
tdNode1.appendChild(textNode1);
var tdNode2 = document.createElement('td');
var textNode2 = document.createTextNode(email);
tdNode2.appendChild(textNode2);
var tdNode3 = document.createElement('td');
var textNode3 = document.createTextNode(age);
tdNode3.appendChild(textNode3);
var tdNode4 = document.createElement('td');
tdNode4.innerHTML="<input type='button' value='删除' onclick='delLine(this)'/>";
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode3);
trNode.appendChild(tdNode4);
table.appendChild(trNode);
}
//删除信息
function delLine(elem){
var trNode = elem.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
//回车添加信息
function check(event){
if(event.keyCode == 13){
addLine();
}
}
</script>
</body>
</html>
网友评论