<!DOCTYPE html>

<html lang="en">

<head>

<title>Table_Simple CSS for HTML tables</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

html {

    font-family: sans-serif;

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

}

body {

    margin: 10px;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

td,th {

    padding: 0;

}

.pure-table {

    border-collapse: collapse;

    border-spacing: 0;

    empty-cells: show;

    border: 1px solid #cbcbcb;

}

.pure-table caption {

    color: #000;

    font: italic 85%/1 arial,sans-serif;

    padding: 1em 0;

    text-align: center;

}

.pure-table td,.pure-table th {

    border-left: 1px solid #cbcbcb;

    border-width: 0 0 0 1px;

    font-size: inherit;

    margin: 0;

    overflow: visible;

    padding: .5em 1em;

}

.pure-table thead {

    background-color: #e0e0e0;

    color: #000;

    text-align: left;

    vertical-align: bottom;

}

.pure-table td {

    background-color: transparent;

}

div.jizhong{

    text-align: center;

}

</style>

</head>

<body>

    <div class="jizhong">

    <input type="text" id="name">姓名<input type="text" id="age">年龄<input type="text" id="gender">性别

    <button id="add">添加</button>

    </div>

    <table class="pure-table" id="tb" align="center">

        <caption>学生信息表</caption>

        <thead>

            <tr>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>王敬博</td>

                <td>18</td>

                <td>男</td>

                <td><a href="JavaScript:void(0)" onclick="drop(this)">删除</a></td>

            </tr>

            <tr>

                <td>江银涛</td>

                <td>20</td>

                <td>女</td>

                <td><a href="JavaScript:void(0)"  onclick="drop(this)">删除</a></td>

            </tr>

        </tbody>

    </table>

    <script>

        //1 为添加按钮绑定单击事件

        document.getElementById("add").onclick = function(){

            //2创建行元素

        let tr = document.createElement("tr");

            //3创建四个单元格元素

            let nameTd = document.createElement("td");

            let ageTd = document.createElement("td");

            let genderTd = document.createElement("td");

            let deleteTd = document.createElement("td");

            //4将td添加到tr中

            tr.appendChild(nameTd);

            tr.appendChild(ageTd);

            tr.appendChild(genderTd);

            tr.appendChild(deleteTd);

            //5获取文本框的输入信息

            let name = document.getElementById("name").value;

            let age = document.getElementById("age").value;

            let gender = document.getElementById("gender").value;

            //6将文本框信息创建三个文本元素

            let nameText = document.createTextNode(name);

            let ageText = document.createTextNode(age);

            let genderText = document.createTextNode(gender);

            //7将三个文本元素添加到td中

            nameTd.appendChild(nameText);

            ageTd.appendChild(ageText);

            genderTd.appendChild(genderText);

            //8创建超链接元素和显示的文本及添加href属性

            let a =  document.createElement("a");

            let aText = document.createTextNode("删除");

            a.setAttribute("href","JavaScript:void(0)");

            a.setAttribute("onclick","drop(this)")

            a.appendChild(aText);

            //9将超链接元素添加到td中

            deleteTd.appendChild(a);

            //10获取表格元素，将添加到table中

            let table = document.getElementById("tb");

            table.appendChild(tr);

        }

        function drop(obj){

            //1获取table元素

            let table = obj.parentElement.parentElement.parentElement;

            //2获取tr元素

            let tr = obj.parentElement.parentElement;

            //3删除tr

            table.removeChild(tr);

        }

    </script>

</body>

</html>

js实现动态表格的添加的更多相关文章

  1. JS 创建动态表格练习

    创建动态表格 1.1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  2. js的动态表格的增删改查思路

    1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...

  3. JS/JQ动态创建（添加）optgroup和option属性

    JavaScript和Jquery动态操作select下拉框 相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了 ...

  4. js的动态表格的增删改查完整代码

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

  5. JS做动态表格

    在后台将数据发送过来后,你需要将这些数据做成表格,实现一般表格管理功能 例如这种数据格式, 首先要创建table 在table中添加thead  在thead中添加tr 循环数组,且创建开头的inpu ...

  6. JS脚本动态给元素/控件添加事件

    最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...

  7. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  8. js如何实现动态在表格中添加标题和去掉标题？

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  9. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  10. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

随机推荐

  1. 为什么说 Mybatis 是半自动 ORM 映射工具？它与全自动的区别在哪里？

    Hibernate 属于全自动 ORM 映射工具,使用 Hibernate 查询关联对象或者关联集合对象时,可以根据对象关系模型直接获取,所以它是全自动的.而 Mybatis 在查询关联对象或关联集合 ...

  2. redis zset 延迟合并任务处理

    redis zset 延迟合并任务处理 @Autowired public RedisTemplate redisTemplate; ##1.发送端:在接口中收集任务ID,累计时间段之后,合并处理. ...

  3. Project Euler 1~10 野蛮题解

    这些题都比较简单就不贴代码和做法了 23333333 具体到做法就是枚举暴力,这十题中可能难一点地方的就是筛质数表,可以学习一下 Eratosthenes 筛法或者是欧拉筛. 如果您不会前十题建议好好 ...

  4. ClickHouse介绍（三）MergeTree系列表引擎

    MergeTree系列表引擎 ClickHouse中最核心的引擎当属MergeTree系列引擎,其中基础表引擎为MergeTree,常用的表引擎还有ReplacingMergeTree.Summing ...

  5. Linux驱动：输入子系统(input-subsystem) 分析

    Linux驱动:输入子系统 分析 参考: https://www.cnblogs.com/lifexy/p/7542989.html https://blog.csdn.net/myselfzhang ...

  6. openfoam 修改 src 库经验记录

    遇到一个问题,要把 sprayFoam 求解器的蒸发模型修改为自定义蒸发模型. sprayFoam 求解器本身没有实现蒸发模型,而是调用 $FOAM_SRC/lagrangian/intermedia ...

  7. 【ClickHouse】4：clickhouse基本操作二 建库建表导数据

    背景介绍: 有三台CentOS7服务器安装了ClickHouse HostName IP 安装程序 程序端口 centf8118.sharding1.db 192.168.81.18 clickhou ...

  8. 制作visual studio 离线安装包

    应用场景:脱机.内网环境安装vs开发环境. 概述:在互联网环境下载安装工具,下载根据需求并缓存布局(类似功能模块),压缩缓存内容拷贝至离线环境进行安装. 1.官网下载指定版本的vs安装客户端 创建基于 ...

  9. Coding:小写一个debugfs

    Coding:小写一个debugfs ​ 上一次整活还是在上一个月,写了一个简单的module并且熟悉了module的挂载查看和卸载.这一次我们自然玩一个大的,就是利用linux的debugfs AP ...

  10. 网络化的控制系统简介(NCS)

    作为一个搞物联网应用的,最近才接触到NCS这个概念.有点东西,赶紧记录一下. NCS由通过网络连通的控制环路组成,控制信号和反馈信号会在控制器和本地系统间交换.典型的方块图如下: 其中,本地(Plan ...