1、遮罩层宽高100%，position，不占位

2、注册a标签的删除事件，用on()方法，以方法可以动态添加，之前js需要利用冒泡属性（父标签注册事件，子标签冒泡，target===li触发事件）

3、$(".add input:eq(1)").prop("checked")?$(".add input:eq(1)").val() : $(".add input:eq(2)").val()---需要括号括起来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .mask {

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.4);

            position: absolute;

            display: none;

        }

        .add {

            width: 300px;

            height: 250px;

            padding-left: 100px;

            padding-top: 50px;

            background-color: #fff;

            margin: 200px auto;

            font: 400 20px "simsun";

            position: relative;

        }

        .add input {

            margin: 10px;

        }

        .add span {

            position: absolute;

            right: 0;

            top: 0;

            width: 30px;

            height: 30px;

            text-align: center;

            font: 500 30px/30px "simsun";

            background-color: #cccccc;

        }

        .add button {

            width: 70px;

            height: 25px;

            margin: 20px 0 0 150px;

        }

        table {

            border: 1px solid #ccc;

            border-collapse: collapse;

            text-align: center;

            font: 500 20px "simsun";

            margin: 100px auto;

        }

        th, td {

            width: 100px;

            border: 1px solid #ccc;

        }

        a {

            text-decoration: none;

        }

    </style>

    <script src="jquery-1.11.1.js"></script>

    <script>

        $(function () {

            var arr = [

                {"name": "王杰", "gender": "男", "age": 19},

                {"name": "王花", "gender": "女", "age": 19},

                {"name": "王明", "gender": "男", "age": 19}

            ];

            for (var i = 0; i < arr.length; i++) {

                $("tbody").append($("<tr><td>" + arr[i].name + "</td><td>" + arr[i].gender + "</td><td>" + arr[i].age + "</td><td><a href='javascript:;'>删除</a></td></tr>"));

            }

            $("tbody").on("click", "a", function () {

                $(this).parent().parent().remove();

            });

            $("button").click(function () {

                $(".mask").show();

            });

            $(".add span").click(function () {

                $(".add input").val("");

                $(".add input:checked").attr("checked", false);

                $(".mask").hide();

            });

            $(".add button").click(function () {

                //$(".add input:eq(1)").prop("checked")?$(".add input:eq(1)").val() : $(".add input:eq(2)").val()---需要括号括起来

                console.log($(".add input:eq(1)").prop("checked"));

                $("tbody").append($("<tr><td>" + $(".add input:eq(0)").val() + "</td><td>" + ($(".add input:eq(1)").prop("checked") ? $(".add input:eq(1)").val() : $(".add input:eq(2)").val()) + "</td><td>" + $(".add input:eq(3)").val() + "</td><td><a href='javascript:;'>删除</a></td></tr>"));

                $(".add input").val("");

                $(".add input:checked").attr("checked", false);

                $(".mask").hide();

            });

        });

    </script>

</head>

<body>

<div class="mask">

    <div class="add">

        <span>×</span>

        姓名<input type="text"><br>

        性别<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女">女<br>

        年龄<input type="text"><br>

        <button>提交</button>

    </div>

</div>

<button>添加数据</button>

<table>

    <thead>

    <tr>

        <th>姓名</th>

        <th>性别</th>

        <th>年龄</th>

        <th>备注</th>

    </tr>

    </thead>

    <tbody>

    <!--<tr>-->

    <!--<td>王杰</td>-->

    <!--<td>男</td>-->

    <!--<td>19</td>-->

    <!--<td><a href="javascript:;">删除</a></td>-->

    <!--</tr>-->

    <!--<tr>-->

    <!--<td>王杰</td>-->

    <!--<td>男</td>-->

    <!--<td>19</td>-->

    <!--<td><a href="javascript:;">删除</a></td>-->

    <!--</tr>-->

    </tbody>

</table>

</body>

</html>

jQuery——表格添加数据的更多相关文章

  1. 用JSON数据向已定义列的表格添加数据行

    其实添加方式和在MVC中动态读取JSON数据创建表格一样,只不过一个是完整表格添加,一个是从表格中间添加.不详细说明了. <div> <table class="table ...

  2. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  3. vue+element 给表格添加数据，页面不实时刷新的问题

    由于页面加载时,使用了keep-alive,keep-alive具有数据缓存作用,当在添加页面添加成功时,返回主页面没有立即更新.数据有缓存. 解决办法如下: 将获取数据列表的方法放到activate ...

  4. C#使用Command将dataGrideView表格内数据与数据库交互

    本文主要介绍通过Command类使用SQL插入指令insert与查询指令select将dataGrideView表格内添加至数据库,与从数据库读出数据存放在dataGrideView表格中. C#制作 ...

  5. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  6. jquery表格动态增删改及取数据绑定数据完整方案

    一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...

  7. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet

    实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...

  9. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. nyoj_214_单调递增子序列(二)_201403182131

    单调递增子序列(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长 ...

  2. zoj——1202 Divide and Count

    Divide and Count Time Limit: 2 Seconds      Memory Limit: 65536 KB Jack has several beautiful diamon ...

  3. Java中DAO/DTO/PO/VO/BO/QO/POJO

    ORM:是Object Relational Mapping(对象关系映射)的缩写. 通俗点讲,就是将对象与关系数据库绑定,用对象来表示关系数据.在O/R/M的世界里,有两个基本的也是重要的东东需要了 ...

  4. NETCore项目报错 An error occurred while starting the application

    在发布到IIS的webApi项目中,运行时报出以上错误, 解决方法: 1.打开发布目录文件夹,找到web.config文件 2.打开web.config找到stdoutLogEnabled=" ...

  5. Jupyter Notebook: 解决build docker-stacks时conda太慢的问题

    当想使用docker安装Jupyter Notebook时,有一个很好的项目是docker-stacks(https://github.com/jupyter/docker-stacks/tree/m ...

  6. [JavaEE] Testing the Java EE Application : Basic Arquillian integration test

    We have model like this: package com.pluralsight.bookstore.model; import javax.persistence.*; import ...

  7. Android MTP 文件浏览Demo

    本apk实现了MTP文件浏览的简单功能. 通过Demo apk能够浏览连接到当前设备上的MTP设备上的文件. Demo路径:http://download.csdn.net/detail/sailin ...

  8. LeetCode 350. Intersection of Two Arrays II （两个数组的相交之二）

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  9. CentOS 7下安装Hadoop2.2

    这里就介绍CentOS的安装了,直接进入Hadoop2.2伪分布模式安装. 1.安装包下载 1.1.下载JDK1.7 眼下JDK的版本号是jdk1.8.0_25.这里下载的是jdk1.7.0_67. ...

  10. SoapUI项目书写自我规范

    -->Assertions 判断某个节点存在(_input_name, _button_name) -->Resource 文件夹命名 值去掉红色部分信息 https://mercury- ...