<!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. windows下IPv4通信(C++、MFC)

    Cilect #include <stdio.h> #include <Ws2tcpip.h> #include <winsock2.h> #define HELL ...

  2. C#.Net筑基-深入解密小数内部存储的秘密

    为什么0.1 + 0.2 不等于 0.3?为什么16777216f 等于 16777217f?为什么金钱计算都推荐用decimal?本文主要学习了解一下数字背后不为人知的存储秘密. 01.数值类型 C ...

  3. 【Java】JVM字节码分析

    一.功能 1.工作原理 2.解释和运行 jvm本质上是运行在计算机上的程序,负责运行java字节码文件 对字节码文件中的指令,实时的解释成机器码,供计算机执行 3.内存管理 自动为对象.方法等分配内存 ...

  4. 使用Vulkan-Loader将ncnn代码改成Dynamic Loader Vulkan的形式

    原本你写的程序是静态链接的系统的vulkan-1.dll,如果系统不存在vulkan-1.dll,则会直接崩溃. 关于将ncnn静态链接vulkan改成动态加载vulkan的形式,然后提供这两个函数 ...

  5. 键盘中断，键盘驱动，基于Linux0.11

    键盘,咱们做计算机这一行的自然不必多说,天天与它打交道.但熟归熟,清楚键盘背后的原理吗?键盘上都标有各键的名称,表明了各键所代表的意义,但是计算机是如何知道的?组合键是怎样实现的?按下一个代表字符的键 ...

  6. gitlab私有仓库搭建

    1.Gitlab介绍 我们了解了git是以个人为中心,但是人人都得数据交互呀..python程序员每天都忙着进行py交易 交互数据的方式 使用github或者码云等公有代码仓库,托管代码的地方,谁都可 ...

  7. CRP关键渲染路径笔记

    关键渲染路径CRP笔记 关键渲染路径(Critical Render Process)是浏览器将HTML.CSS和JavaScript代码转换为屏幕上像素的步骤序列,它包含了DOM(Document ...

  8. vitepress 如何更换 favicon.ico

    favicon.ico 它出现在浏览器标签页上,是网站的标识之一. 准备图标 首先,你需要准备一个符合您要求的图标.通常,favicon.ico 使用的是 .ico 格式的图标文件,大小为 16x16 ...

  9. 三月二十五日 安卓打卡app开发

    今天完成了每月打卡次数统计功能 public static String count(String account) throws SQLException { Connection connecti ...

  10. Java 对象转Map，Java Map转对象方法

    Java 对象转Map,Java Map转对象方法 import com.alibaba.fastjson.JSON; import org.apache.commons.beanutils.Bean ...