<!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. 7.19考试总结(NOIP模拟20)[玩具·y·z]

    与其被自己的本性牵着走而痛苦,倒不如试着改变自己. 前言 首先自我检讨一下,T1的部分分是原题,但是我这个 FW 居然没有看出来..(主要是我看错题了) 论语文素养如何限制 OI 水平 别人眼里是一棵 ...

  2. RT-Thread Studio使用教程

    介绍 RT-Thread Studio是官方出品的一款专门针对RT-Thread嵌入式开发.部署.调试.测试的集成开发环境,它基于Eclipse开源项目开发,极大的提高了嵌入式开发者的开发效率,目前最 ...

  3. BLP 模型

    公号:Rand_cs BLP 模型 本篇文章是调研了许多资料后对 BLP 模型的一个总结 MLS,Multi-level Security,主要关心的是数据机密性 D. Elliott Bell 和 ...

  4. CF364E

    problem 算法1 我会暴力!!! 直接枚举右上角和左下角,然后计算答案,使用前缀和优化后时间复杂度为 \(O(n^4)\). 算法2 我会分治!!!. 我们知道答案就是左边+右边+两边都有的个数 ...

  5. SRE Google 运维解密读书笔记一：SRE 方法论概述

    SRE Google 运维解密,是 SRE 领域的启蒙之作,讲述了 Google 的 SRE 实践,SRE 就是从 Google 流传出来的.本文是读书笔记,第一篇,概述 SRE 方法论.帮大家把书读 ...

  6. Scrapy框架(九)--分布式爬虫

    分布式爬虫 - 概念:我们需要搭建一个分布式的机群,让其对一组资源进行分布联合爬取. - 作用:提升爬取数据的效率 - 如何实现分布式? - 安装一个scrapy-redis的组件 爬取到的数据自动存 ...

  7. Xcode 配置账号

    Xcode 配置开发者账号 简介:在iOS 开发过程中,要打包到手机上是需要登陆账号和配置对应证书的. 配置账号 打开Xcode -> Preferences -> Accounts -& ...

  8. 支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象

    支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象 SPI 三方服务接入指南https://opendocs.alipay.com/isv/spiforisv 服务端实现 ...

  9. java.lang.IllegalStateException: Expected BEGIN_OBJECT but was STRING at line 1 column 2 path $

    java.lang.IllegalStateException: Expected BEGIN_OBJECT but was STRING at line 1 column 2 path $ pack ...

  10. 引入feign注入报错 org.springframework.beans.factory.NoSuchBeanDefinitionException解决

    引入feign注入报错 org.springframework.beans.factory.NoSuchBeanDefinitionException解决 [172.16.22.215] out: C ...