原生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"> < ...
随机推荐
- NC23051 华华和月月种树
题目链接 题目 题目描述 华华看书了解到,一起玩养成类的游戏有助于两人培养感情.所以他决定和月月一起种一棵树.因为华华现在也是信息学高手了,所以他们种的树是信息学意义下的. 华华和月月一起维护了一棵动 ...
- SSD 表项管理概述（一）——L1、L2、L3
分类 名称 说明 映射表相关 L1 Table 记录每个4KB用户数据在SSD上的存放物理地址: L2 Table 记录每个sub L1 Table在SSD上的存放物理地址: L3 Table 记录每 ...
- gif 制作
gif 制作 博文中使用 gif 有时比纯粹的图片更明了.比如展示"墨刀"中的动画效果: 录制视频 首先利用录制视频,例如使用在线录制工具 vizard. Tip:需要花费2分钟手 ...
- java 注解结合 spring aop 实现自动输出日志
auto-log auto-log 是一款为 java 设计的自动日志监控框架. 创作目的 经常会写一些工具,有时候手动加一些日志很麻烦,引入 spring 又过于大材小用. 所以希望从从简到繁实现一 ...
- html中iframe调用兄弟iframe中的js方法
问题说明 最近工作中碰到一个页面有一个主iframe A,用于操作主要业务元素.其中有一个弹出框里面也嵌入了一个iframe B, 此时,我需要在B中调用A中JS的指定方法.下面咱们来通过例子还原一下 ...
- MySQL写入SQL整个执行流程
innodb存储引擎中一条sql写入的详细流程 第0步:会先去看缓冲区有没有这条数据,如果有就不进行缓存,直接进入第三步. 第1步:会将要修改的那一行数据所在的一整页加载到缓冲池Buffe ...
- docker启动nginx https自签名证书配置
启动测试应用时, 有时需要自己配置证书签名: 1 使用系统自带openssl openssl req \ > -x509 \ > -nodes \ > -days 365 \ > ...
- Telegraph多线程下载器v0.5--tkinter
介绍 最近在拿python写一点小工具,结合之前的多线程.线程池技术做了个GUI版的Telegraph图册批量下载工具. 因为开发平台是在Mac,虽然对Windows平台的也进行了打包,但最垃圾的Wi ...
- webservice之jax-ws实现方式(服务端)
1.什么是webservice? webservice是一种远程资源调用技术,它的实现方式主要分为两种, 第一种是jaxws方式,它是面向方法的,它的数据类型是xml是基于soap实现传输: 第二种是 ...
- typing的中的Optional说明
from typing import Optional def show_count(count: int, singular: str, plural: Optional[str] = None) ...