<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wi
dth=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table{
text-align: center;
width: 100%;
}
.content{
text-align: center;
margin-top: 50px;
}
div{
margin-top: 20px;
}
</style>
</head>
<body>
<table class="table" border="1" id="table">
<tr>
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>班级</td>
<td>
<a href="#" οnclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr>
<td>01</td>
<td>浙江爱仕达</td>
<td>21</td>
<td>21级2班</td>
<td>
<a href="#" οnclick="deleteRow(this)">删除</a>
</td>
</tr>
</table>
<div class="content">
<div>
序号：<input type="text" id="num">
</div>
<div>
姓名：<input type="text" id="name">
</div>
<div>
年龄：<input type="text" id="age">
</div>
<div>
班级：<input type="text" id="clazz">
</div>
<div>
<button οnclick="add()">添加</button>
</div>
</div>
</body>
<script>
function add(){
var num=document.getElementById('num').value;
var name=document.getElementById('name').value;
var age=document.getElementById('age').value;
var clazz=document.getElementById('clazz').value;
if(!num || !name || !age || !clazz){
alert('请输入完整！')
return;
}
var newTr=document.createElement('tr');
var numTd=document.createElement('td');
numTd.innerText=num;
var nameTd=document.createElement('td');
nameTd.innerText=name;
var ageTd=document.createElement('td');
ageTd.innerText=age;
var clazzTd=document.createElement('td');
clazzTd.innerText=clazz;
var deleteTd=document.createElement('td');
var newA =document.createElement('a');
newA.innerText='删除';
newA.href='#';
newA.οnclick=function(){
var f=confirm('你确定要删除该记录吗？')
if(f){
console.log(this);
var tr=this.parentNode.parentNode;
console.log(tr);
var table=document.getElementById('table');
table.removeChild(tr);
}
}
deleteTd.appendChild(newA);
newTr.appendChild(numTd);
newTr.appendChild(nameTd);
newTr.appendChild(ageTd);
newTr.appendChild(clazzTd);
newTr.appendChild(deleteTd);
var table =document.getElementById('table');
table.appendChild(newTr);
}
</script>
</html>
1854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
