<!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. Linux网络驱动

    1 简介 1.1 硬件说明 嵌入式网络硬件分为:MAC和PHY.MAC一般时SOC内置,PHY是外部器件. (1)SOC内部没有MAC 如果SOC内部没有网络MAC外设,可使用外置的MAC,一般外置的 ...

  2. react withRouter高阶组件

    作用:把不是通过路由切换过来的组件中,将react-router 的 history.location.match 三个对象传入props对象上 默认情况下必须是经过路由匹配渲染的组件才存在this. ...

  3. Ubuntu 更改鼠标滚轮速度

    1.安装imwheel sudo apt-get install imwheel 2.更改配置 sudo gedit ~/.imwheelrc 输入以下内容: ".*"None,  ...

  4. SRE 必备利器：域名 DNS 探测排障工具

    问题背景 访问某个 HTTP 域名接口,偶发性超时,原因可能多种多样,比如 DNS 解析问题.网络质量问题.对端服务负载问题等,在客户端没有良好埋点的情况下,排查起来比较费劲,只能挨个方向尝试,这里送 ...

  5. Vue2复习

    Vue2 插值.指令.动态属性.表达式.v-html 插值:{{ data }} 指令 & 动态属性:例子(:id="xxx") 表达式:可以用于赋值,写在{{}}里面 v ...

  6. 18.9k star！一个高性能的嵌入式分析型数据库，主要用于数据分析和数据处理任务。

    大家好,今天给大家分享的是一个开源的面向列的关系数据库管理系统(RDBMS). DuckDB是一个嵌入式的分析型数据库,它提供了高性能的数据分析和数据处理能力.DuckDB的设计目标是为数据科学家.分 ...

  7. ELKF（elasticsearch、logstash、kibana、filebeat）搭建及收集nginx日志

    1.elasticsearch 1.1.根目录下新建data文件夹 1.2.修改elasticsearch.yml文件,添加以下内容 path.data: /home/wwq/elk/elastics ...

  8. Linux开机启动三种方式

    有的时候,我们开机启动一些命令或者是一段脚本,又或者是开机启动自定义的服务. 下面归纳了2种实现的方式. 方式1-开机启动命令 vim /etc/rc.local #添加你想执行的命令 chmod + ...

  9. CF1854E Games Bundles

    乱搞题 设个 \(dp[i]\) 表示和为 \(i\) 的子序列个数,那么转移是容易的, \(dp[j]+=dp[j-i]\) ,然后就判下 \(dp[60]+dp[60-i]\) 是否大于 \(m\ ...

  10. Linux 内核：RCU机制与使用

    Linux 内核:RCU机制与使用 背景 学习Linux源码的时候,发现很多熟悉的数据结构多了__rcu后缀,因此了解了一下这些内容. 介绍 RCU(Read-Copy Update)是数据同步的一种 ...