HTML:
<body>
<form name="userForm">
<center>
用户录入<br/>
用户名:<input id="username" name="username" type="text" size=15/>
E-mail:<input id="email" name="email" type="text" size=15/>
电话:<input id="tel" name="tel" type="text" size=15/>
<input type="button" value="添加" id="btn_submit"/>
<input type="button" value="删除所有" id="btn_removeAll"/>
</center>
</form>
<hr/>
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="userTbody">
<tr id="0001">
<td>张无忌</td>
<td>wujizhang@163.com</td>
<td>18212345678</td>
<td><a href="javascript:delRow('0001')">删除</a></td>
</tr>
</tbody>
</table>
</body>
JS:
window.onload = function(){
//找到添加按钮
var btn = document.getElementById("btn_submit");
btn.onclick = function(){
//获取三个输入框中的值
var username = document.getElementById("username");
var email = document.getElementById("email");
var tel = document.getElementById("tel");
//获取当前系统时间
var time = new Date().getTime();
//创建一个tr
var tr = document.createElement("tr");
tr.setAttribute("id", time);
//创建四个td
var td1 = document.createElement("td");
td1.innerText = username.value;
var td2 = document.createElement("td");
td2.innerText = email.value;
var td3 = document.createElement("td");
td3.innerText = tel.value;
var td4 = document.createElement("td");
td4.innerHTML = "<a href='javascript:delRow(\""+time+"\")'>删除</a>";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//找到tablebody
var body = document.getElementById("userTbody");
body.appendChild(tr);
};
//找到删除所有按钮
var btnAll = document.getElementById("btn_removeAll");
btnAll.onclick = function(){
var body = document.getElementById("userTbody");
body.innerHTML = "";//直接替换body里面的内容
};
};
//根据id删除tr
function delRow(id){
var tr = document.getElementById(id);
tr.parentNode.removeChild(tr);
}
网友评论