原生js实现table的增加删除
Posted 萝卜爱吃肉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现table的增加删除相关的知识，希望对你有一定的参考价值。
<!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,
.table tr,
.table td {
border: 1px solid #000000;
}
#tables {
display: none;
}
.table input {
outline: none;
border: 0;
background-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<div class="container">
<div>
<label for="showTable">显示<input type="radio" name="isShow" id="showTable" onclick="clickShow()"></label>
<label for="hideTable">隐藏 <input type="radio" checked name="isShow" id="hideTable" onclick="clickHide()"></label>
</div>
<div id="tables">
<div>
<button onclick="addTr()">添加</button>
<button onclick="deleteTr()">删除</button>
</div>
<table id="table" class="table" cellspacing="0">
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
</div>
</body>
<script>
function addTr() {
var tr = document.createElement("tr");
var td = null;
var input = null;
for (let i = 0; i < 4; i++) {
input = document.createElement(‘input‘);
if (i == 0) {
input.type = "checkbox";
input.className = "checkbox";
}
td = document.createElement(‘td‘);
td.appendChild(input);
tr.appendChild(td);
}
document.getElementById("table").children[0].appendChild(tr);
}
function deleteTr() {
var box = document.getElementsByClassName(‘checkbox‘);
var len = box.length;
var parent = null;
for (var i = len - 1; i > -1; i--)
if (box[i].checked) {
parent = box[i].parentNode.parentNode;
parent.remove();
}
}
function clickShow() {
document.getElementById("tables").style.display = "inline-block";
}
function clickHide() {
document.getElementById("tables").style.display = "none";
}
</script>
</html>
效果图
以上是关于原生js实现table的增加删除的主要内容，如果未能解决你的问题，请参考以下文章
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法(