原生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"> < ...
随机推荐
- NC24370 [USACO 2012 Dec S]Milk Routing
题目链接 题目 题目描述 Farmer John's farm has an outdated network of M pipes (1 <= M <= 500) for pumping ...
- NC16641 [NOIP2007]守望者的逃离
题目链接 题目 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒 ...
- 【Android】使用MediaExtractor获取关键帧的时间戳
1 前言 使用MediaExtractor.MediaMuxer去掉视频文件中的音频数据 中介绍了 MediaExtractor 类的主要方法,本文主要将使用其 advance() 和 seekTo( ...
- spring boot 2.0集成并使用redis
项目地址:https://gitee.com/indexman/spring_boot_in_action 前面一章介绍了spring boot自带的缓存,下面讲一下如何在2.0版本中集成并使用red ...
- .Net Code Excel 文件导入
第一步 下载NuGet NPOI包 /// <summary> /// 将excel文教导入到订单表 /// </summary> /// <param name=&qu ...
- 2021-10-25 css中零值0后面是否要省略单位
原理 在css中如果值为0,可以省略单位. 在css应用场景中,有可能是多端多人维护.即可能维护的人有A及B及C-,应用场景中有电脑端及手机端及小程序及打印机之类的. 结论 个人认为不要省略单位,不要 ...
- RK3568开发笔记（八）：开发板烧写buildroot固件（支持hdmi屏），搭建Qt交叉编译开发环境，编译一个Demo，目标板运行Demo测试
前言 前面发现开发板用ubuntu固件发现空间不够,本篇使用buildroot固件,来实现目标板运行qt界面应用. 烧写buildroot固件 这部分更详细的参照<RK3568开发笔 ...
- 关于Python中math 和 decimal 模块的解析与实践
本文分享自华为云社区<Python数学模块深度解析与实战应用>,作者: 柠檬味拥抱. 在Python中,math 和 decimal 模块是处理数学运算的重要工具.math 提供了一系列常 ...
- DataGear 制作自定义柱状图条目颜色的数据可视化看板
DataGear 看板提供了dg-chart-options图表选项配置功能,可自定义样式.位置.显示内容等图表选项,其中的processUpdateOptions回调函数配置项,可以在图表更新数据前 ...
- 【Azure 容器应用】在中国区Azure上创建的容器服务默认应用域名不全
问题描述 在中国区Azure上,创建Container App服务,发现默认的应用程序URL只有前半段,并不是一个完整的域名.这是什么情况呢? 正常的Container App的URL格式为:< ...