<!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. 引用(包含) import wxss样式

    引用(包含) 把模板定义到外部,然后多个页面间可以共用使用定义的模板WXML结构显示. https://developers.weixin.qq.com/miniprogram/dev/referen ...

  2. mac home目录下无法mkdir目录及文件的解决方法

    主要参考以下几篇文章 https://www.cnblogs.com/zhangbao3/p/12600058.html https://www.v2ex.com/t/607387 https://w ...

  3. 导出excel文件接口代码示例

    导出excel文件接口代码示例 1.该导出接口,token不能通过请求头来传输,需要在get请求的参数中带出来2.验证token的方法除了在拦截器中统一拦截,针对get接口传参数的方式也需要单独在接口 ...

  4. Java中的ThreadLocal和 InheritableThreadLocal

    Java中的ThreadLocal和 InheritableThreadLocal package com.example.core.mydemo.java; /** * output * Threa ...

  5. Jenkins发布服务报错Fatal error: put encountered an exception while uploading磁盘空间不足处理 No space left on device

    Jenkins发布服务报错Fatal error: put encountered an exception while uploading磁盘空间不足处理 No space left on devi ...

  6. mongodb QuickStart Demo

    import com.mongodb.client.MongoClient; import com.mongodb.client.MongoClients; import com.mongodb.cl ...

  7. ES Elasticsearch exception [type=search_phase_execution_exception, reason=all shards failed

    查看日志切分:sed -n '/2022-03-21 01:50:11.785/,/2022-03-21 02:25:01.130/p' test-2022-03-21-1.log > 2203 ...

  8. 指令（Prompt）基本格式

    指令(Prompt)基本格式: 参考信息:包含文心一言完成任务时需要知道的必要背景和材料,如:报告.知识.数据库.对话上下文等 动作:需要文心一言帮你解决的事情,如:撰写.生成.总结.回答等 目标:需 ...

  9. Nuxt3页面开发实战探索

    title: Nuxt3页面开发实战探索 date: 2024/6/19 updated: 2024/6/19 author: cmdragon excerpt: 摘要:这篇文章是关于Nuxt3页面开 ...

  10. 一份快速入门的 Makefile 教程

    目录 一份快速入门的 Makefile 教程 关于 Makefile,你应该知道的一些事情 什么是 Makefile? Makefile 能做什么? Makefile 怎么写? Makefile 与 ...