<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width:600px;
cursor: pointer;
}
table td{
text-align: center;
}
table a{
float:right;
}
</style>
</head>
<body>
<div>
学号：<input type="text" id="xh"> <br>
姓名：<input type="text" id="uname"> <br>
年龄：<input type="text" id="age">
</div>
<input type="button" value="添加" id="btn">
<table border="1" cellspacing="0" cellpadding="0" id="tbd">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
</table>
</body>
<script>
var btn=document.getElementById('btn')
btn.οnclick=function () {
var xh=document.getElementById('xh')
var uname=document.getElementById('uname')
var age=document.getElementById('age')
var tbd=document.getElementById('tbd')
if(xh.value =='' || uname.value == '' || age.value == ''){
alert('请输入完整的信息！')
return
}
var newtr=document.createElement('tr')
tbd.appendChild(newtr)
var td1=document.createElement('td')
var td2=document.createElement('td')
var td3=document.createElement('td')
td1.innerHTML=xh.value;
td2.innerHTML=uname.value;
td3.innerHTML=age.value + "<a href='javascript:;'>删除</a>"
newtr.appendChild(td1)
newtr.appendChild(td2)
newtr.appendChild(td3)
var as=document.querySelectorAll('a')
for(var i=0;i<as.length;i++){
as[i].οnclick=function () {
tbd.removeChild(this.parentNode.parentNode)
}
}
}
</script>
</html>
web实验：动态生成表格
2558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
