<!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. NC22594 Rinne Loves Graph

    题目链接 题目 题目描述 Island 发生了一场暴乱!现在 Rinne 要和 Setsuna 立马到地上世界去. 众所周知:Island 是有一些奇怪的城镇和道路构成的(题目需要,游戏党勿喷),有些 ...

  2. apache kafka-01-kafka 入门介绍

    ​kafka 名字背后的故事 说到卡夫卡,不知道你脑海中第一个想到的是什么? 是<变形记>的作者弗兰兹·卡夫卡(Franz Kafka)?还是村上春树的<海边的卡夫卡>? 不知 ...

  3. 区间dp-Palindrome

    Palindrome 题意:给一个字符串,问最少加上多少个字符,可以使这个字符串成为回文串 思路一.直接dp(会爆内存) dp[i][j]表示区间[i,j]之间有最少需要加上多少个字符 状态转移方程: ...

  4. 系统环境变量中 HTTPS_PROXY 的误区

    前段时间在测试一个连麦 demo,demo 简要说可以在内网环境中运行时,输入频道号就可以模拟连麦 但是在加入连麦时,一直返回错误 -2 EOF,询问得知,该错误的解释信息是"Service ...

  5. 从 vs 的 rc 文件中获取版本号

    更新项目版本号时,需要与 rc 文件的 version 同步,比较方便的方法是直接从 rc 文件中获取版本号,并应用到程序中 // 删除日志检查 bool GetVersion() { // get ...

  6. std::async 与 std::thread 在什么时候使用比较合适

    前提: C++ 11 中提供了多线程的标准库,提供了管理线程.保护共享数据.线程间同步操作.原子操作等类.多线程库对应的头文件是 #include <thread>,类名为 std::th ...

  7. Flutter学习（PV）——概览

    接触flutter有一段时间了,趁着刚过完年有点时间,记录一些有用的东西,一方面给自己备忘,另一方面也希望能帮到有需要的人~ 一.什么是flutter Flutter is Google's UI t ...

  8. ChainMap合并字典

    在python中,我们有两个字典需要合并的时候,可以使用字典的update方法 a = {'a': 1, 'b': 2} b = {'x': 3, 'y': 4} a.update(b) print( ...

  9. 【ACM专项练习#01】基本输入输出，如何加减

    关于ACM,牛客其实也有专门的模拟练习:https://ac.nowcoder.com/acm/contest/5657#question 做这个也可以 关于while(cin>>n) 在 ...

  10. linux 命令行使用codeql

    目录 CodeQL 概述 安装 直接使用在线查询(lgtm) vscode使用codeql 下载 库文件 测试 linux控制台运行 下载 安装 创建数据库 编写QL查询数据库 简单解释 CodeQL ...