JavaScript 作业
给学生信息表动态添加信息、删除所选行的整条信息
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息表的添加与删除</title>
<link rel="stylesheet" href="../css/DomHomework.css">
</head>
<body>
<div id="in">
<input type="text"id="intd1">
<input type="text"id="intd2">
<input type="text"id="intd3">
<button onclick="add()">添加</button>
<br><br>
</div>
<table border="1" id="tb">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
<script>
function add(){
//获取输入的值
let intd1=document.getElementById("intd1");
let intd2=document.getElementById("intd2");
let intd3=document.getElementById("intd3");
let intd1value=intd1.value;
let intd2value=intd2.value;
let intd3value=intd3.value;
//创建单元格对象,并赋值
let td1=document.createElement("td");
td1.innerText=intd1value;
let td2=document.createElement("td");
td2.innerText=intd2value;
let td3=document.createElement("td");
td3.innerText=intd3value;
let td4=document.createElement("td");
let a= document.createElement("a");
a.innerText="删除";
td4.appendChild(a);
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","deletetr(this)");
//创建行标签
let tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//获取table对象
let tb=document.getElementById("tb");
tb.appendChild(tr);
}
function deletetr(obj){
let tb=obj.parentElement.parentElement;
let tr=obj.parentElement.parentElement;
tb.remove(tr);
}
</script>
思路分析
添加
getElementById("intd1");
获取每个input标签中的值,document.createElement("td");
创建单元格,把获取到的值赋值给每个单元格
let tr=document.createElement("tr");
创建行, tr.appendChild(td1);
把单元格添加到行当中
删除
每行最后一个单元格中创建a标签用于删除操作 a.setAttribute("href","javascript:void(0);");
设置a属性链接不能跳转
a.setAttribute("onclick","deletetr(this)");
设置a标签属性点击时间对应的功能delete(this)this用于指代点击的对象
function deletetr(obj){
let tb=obj.parentElement.parentElement;
let tr=obj.parentElement.parentElement;
tb.remove(tr);
}
先获取table对象tb,再获取a标签被点击的父元素tr, tb.remove(tr);删除这行