<!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的增加删除的更多相关文章

  1. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  2. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  3. table动态增加删除

    基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...

  4. 原生js事件的添加和删除

    在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做 ...

  5. 原生js封装添加class，删除class

    一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ...

  6. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  7. 原生js的remove方法代表删除节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS操作 table object HTMLTableSectionElement 对象,获取行数

    <tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...

  9. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  10. 原生js动态添加新元素、删除元素方法

    1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. UML类图入门实战

    介绍 UML--Unified modeling language UML (统一建模语言),是一种用于软件系统分析和设计的语言工具,它用于帮助软件开发人员进行思考和记录思路的结果. UML 本身是一 ...

  2. Maven多模块聚合工程实战

    介绍 本文以SpringCloud微服务多模块聚合案例讲解,全程讲解中间涉及的核心知识点并配图加深理解. 更多maven知识点,建议去看<Maven实战>. 创建父工程 新建maven工程 ...

  3. 【libGDX】使用Mesh绘制三角形

    1 Mesh 和 ShaderProgram 简介 1.1 创建 Mesh ​ 1)Mesh 的构造方法 public Mesh(boolean isStatic, int maxVertices, ...

  4. c2工具sliver的python客户端无法修改grpc超时时间的解决办法

    业务需要,调用了很多implants来执行对应系统上的命令, 但是无论怎么指定interactive.py中execute方法参数, 命令执行超时时间总是30. 后面通过扩展execute方法增加一个 ...

  5. win32-改变Combox的编辑框和下拉列表的背景颜色和文本字体颜色

    只需要调用WM_CTLCOLORLISTBOX和WM_CTLCOLOREDIT来分别处理编辑框和下拉列表. Combox的创建: int xpos = 100; // Horizontal posit ...

  6. kafka学习笔记01-kafka简介和架构介绍

    一.kafka介绍 kafka 最开始是 Linkedin 用来处理海量的日志信息,后来 linkedin 于 2010 年贡献给了 Apache 基金会并成为了顶级项目. 后来开发 kafka 的一 ...

  7. 以二进制文件安装K8S之部署Master高可用集群

    如下以二进制文件方式部署安全的Kubernetes Master高可用集群,具体步骤如下: 1.下载Kubernetes服务的二进制文件 2.部署kube-apiserver服务 3.创建客户端CA证 ...

  8. Langchain 介绍与入门

    官方介绍 LangChain 是一个利用LLM开发应用程序的框架.它让应用程序具备: 上下文感知能力:将LLM连接到上下文源(提示说明.少量示例.用以形成其响应的内容等) 推理:依靠LLM进行推理(例 ...

  9. linux下查看文件时显示行号

    1.用 vi 或 vim 打开文件后显示行号: 显示当前行号: :nu 显示所有行号: :set nu     2.设置服务器显示行号 2.1:编辑~/.vimrc文件,在该文件中加入         ...

  10. css 布局整理2022-4

    理解CSS3里的Flex布局用法(转自网上,博客园修改一些方便更易看懂) 简单有法: 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 ...