原生js实现动态删除表格的一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 300px;
height: 300px;
border: 1px solid black;
}
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
<script>
var otable = document.createElement("table");//创建table
document.body.appendChild(otable);
for (var i = 1; i <= 3; i++) {
var otr = document.createElement("tr");//创建三个tr
otable.appendChild(otr);//将tr添加到table中
for (var j = 1; j <= 3; j++) {
var otd = document.createElement("td");//创建三个td
otr.appendChild(otd);//将td添加到tr中
otd.innerHTML = parseInt(Math.random() * 99);//td内容设置为随机数
}
var d = document.createElement("td");//创建td
otr.appendChild(d); 添加到Tr中
d.innerHTML = "删除";
d.onclick = function () {
this.parentNode.remove();//点击删除
}
}
</script>
