原生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>
效果图
<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>
原生js实现table的增加删除的更多相关文章
- 原生js实现table的排序
原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- table动态增加删除
基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...
- 原生js事件的添加和删除
在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做 ...
- 原生js封装添加class，删除class
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生js的remove方法代表删除节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS操作 table object HTMLTableSectionElement 对象,获取行数
<tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- 原生js动态添加新元素、删除元素方法
1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
随机推荐
- NC22594 Rinne Loves Graph
题目链接 题目 题目描述 Island 发生了一场暴乱!现在 Rinne 要和 Setsuna 立马到地上世界去. 众所周知:Island 是有一些奇怪的城镇和道路构成的(题目需要,游戏党勿喷),有些 ...
- 使用 lspci 和 setpci 调试 PCIe 问题
lspci 命令和 setpci 命令均为 Linux 发行版中原生可用的命令. 这 2 条命令均可提供多级输出,适合在不同时间点用于查看 PCI 总线上训练的不同组件的功能和状态.其中大部分功能均可 ...
- PL/SQL相关的数据字典
PL/SQL相关的数据字典 http://www.oracle.com/technetwork/issue-archive/2012/12-nov/o62plsql-1851968.html 有时候, ...
- 临时修改session日期格式冲突问题
输入的格式要看你安装的ORACLE字符集的类型, 比如: US7ASCII, date格式的类型就是: '01-Jan-01' alter session set NLS_DATE_LANGUAGE ...
- 混合类Mixins介绍
介绍 混合类是封装了一些通用行为的基类,旨在重用代码.通常,混合类本身并没有什么用,仅扩展这种类也行不通 因为在大多数情况下,它都依赖于其它类中定义的方法和属性.通过多继承,可将混合类与其它类一起使用 ...
- 解读平台工程，DevOps真的死了吗？不，它只是换了个马甲而已，弥补了DevOps空心理论，让DevOps继续发展壮大
最**台工程这个概念越来越火爆,Gartner 的预测,到 2026 年,80% 的软件工程组织将拥有*台工程团队,来提供内部服务.组件和应用程序交付工具,作为可重复使用的资源.本篇文章将带你走进*台 ...
- 【LeetCode动态规划#16】矩阵的最小路径和、三角形的最小路径和
矩阵的最小路径和 给定一个包含非负整数的 *m* x *n* 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:一个机器人每次只能向下或者向右移动一步. 示例 1 ...
- 【LeetCode哈希表#2】两个数组的交集（Set+数组）
两个数组的交集 力扣题目链接(opens new window) 题意:给定两个数组,编写一个函数来计算它们的交集. 说明: 输出结果中的每个元素一定是唯一的. 我们可以不考虑输出结果的顺序. 思路 ...
- 虚拟机安装Mac操作系统
参考博客https://www.bilibili.com/read/cv25662180/?spm_id_from=333.1007.0.0
- php的php-fpm
FastCgi与PHP-fpm到底是个什么样的关系 昨晚有一位某知名在线教育的大佬问了我一个问题,你知道php-fpm和cgi之间的关系吗?作为了一个5年的phper了,这个还不是很简单的问题,然后我 ...