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()---需要括号括起来

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. * {
  8. padding: 0;
  9. margin: 0;
  10. }
  11.  
  12. .mask {
  13. width: 100%;
  14. height: 100%;
  15. background: rgba(0, 0, 0, 0.4);
  16. position: absolute;
  17. display: none;
  18. }
  19.  
  20. .add {
  21. width: 300px;
  22. height: 250px;
  23. padding-left: 100px;
  24. padding-top: 50px;
  25. background-color: #fff;
  26. margin: 200px auto;
  27. font: 400 20px "simsun";
  28. position: relative;
  29. }
  30.  
  31. .add input {
  32. margin: 10px;
  33. }
  34.  
  35. .add span {
  36. position: absolute;
  37. right: 0;
  38. top: 0;
  39. width: 30px;
  40. height: 30px;
  41. text-align: center;
  42. font: 500 30px/30px "simsun";
  43. background-color: #cccccc;
  44. }
  45.  
  46. .add button {
  47. width: 70px;
  48. height: 25px;
  49. margin: 20px 0 0 150px;
  50. }
  51.  
  52. table {
  53. border: 1px solid #ccc;
  54. border-collapse: collapse;
  55. text-align: center;
  56. font: 500 20px "simsun";
  57. margin: 100px auto;
  58. }
  59.  
  60. th, td {
  61. width: 100px;
  62. border: 1px solid #ccc;
  63. }
  64.  
  65. a {
  66. text-decoration: none;
  67. }
  68. </style>
  69. <script src="jquery-1.11.1.js"></script>
  70. <script>
  71. $(function () {
  72. var arr = [
  73. {"name": "王杰", "gender": "男", "age": 19},
  74. {"name": "王花", "gender": "女", "age": 19},
  75. {"name": "王明", "gender": "男", "age": 19}
  76. ];
  77. for (var i = 0; i < arr.length; i++) {
  78. $("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>"));
  79. }
  80. $("tbody").on("click", "a", function () {
  81. $(this).parent().parent().remove();
  82. });
  83. $("button").click(function () {
  84. $(".mask").show();
  85. });
  86. $(".add span").click(function () {
  87. $(".add input").val("");
  88. $(".add input:checked").attr("checked", false);
  89. $(".mask").hide();
  90. });
  91. $(".add button").click(function () {
  92. //$(".add input:eq(1)").prop("checked")?$(".add input:eq(1)").val() : $(".add input:eq(2)").val()---需要括号括起来
  93. console.log($(".add input:eq(1)").prop("checked"));
  94. $("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>"));
  95. $(".add input").val("");
  96. $(".add input:checked").attr("checked", false);
  97. $(".mask").hide();
  98. });
  99. });
  100. </script>
  101. </head>
  102. <body>
  103. <div class="mask">
  104. <div class="add">
  105. <span>×</span>
  106. 姓名<input type="text"><br>
  107. 性别<input type="radio" name="gender" value="男"><input type="radio" name="gender" value="女"><br>
  108. 年龄<input type="text"><br>
  109. <button>提交</button>
  110. </div>
  111. </div>
  112. <button>添加数据</button>
  113. <table>
  114. <thead>
  115. <tr>
  116. <th>姓名</th>
  117. <th>性别</th>
  118. <th>年龄</th>
  119. <th>备注</th>
  120. </tr>
  121. </thead>
  122. <tbody>
  123. <!--<tr>-->
  124. <!--<td>王杰</td>-->
  125. <!--<td>男</td>-->
  126. <!--<td>19</td>-->
  127. <!--<td><a href="javascript:;">删除</a></td>-->
  128. <!--</tr>-->
  129. <!--<tr>-->
  130. <!--<td>王杰</td>-->
  131. <!--<td>男</td>-->
  132. <!--<td>19</td>-->
  133. <!--<td><a href="javascript:;">删除</a></td>-->
  134. <!--</tr>-->
  135. </tbody>
  136. </table>
  137. </body>
  138. </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. apt-get使用指南

    最近频繁使用apt-cache show(查看软件包详细信息)与apt-cache search(搜寻具体软件包确切名称)命令,深感方便与功能强大.现将一些apt-get相关命令做一个简单的收集: a ...

  2. [NOI2000] 单词查找树

    ★★   输入文件:trie.in   输出文件:trie.out   简单对比 时间限制:1 s   内存限制:128 MB 在进行文法分析的时候,通常需要检测一个单词是否在我们的单词列表里.为了提 ...

  3. cocos2D(七)---- CCScene

    CCScene普通情况是游戏里面的根节点.称之为"场景",执行游戏时须要通过CCDirector启动第一个场景. 当然,游戏略微复杂一点的话.可能会包括非常多个场景,这就涉及到场景 ...

  4. poj-1635 Subway tree systems(推断两个有根树是否同构)-哈希法

    Description Some major cities have subway systems in the form of a tree, i.e. between any pair of st ...

  5. python-pexpect_02ssh

    #!/usr/bin/env python """ This runs a command on a remote host using SSH. At the prom ...

  6. swift 2.0 语法 字符串

    //: Playground - noun: a place where people can play import UIKit /*: 字符串 * OC中的字符串是一个对象, Swift中的字符串 ...

  7. css高级:font-size

    body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...

  8. 5.3.3 deque对象

    class collections.deque([iterable[, maxlen]]) 返回一个新双向队列,当有输入迭代器时.会从左至右地加入到队列里.假设没有输入參数,就创建一个空队列. deq ...

  9. hdoj 4925 Apple tree 【最小割】

    题目:pid=4925">hdoj 4925 Apple tree 来源:2014 Multi-University Training Contest 6 题意:给出一个矩阵,然后每一 ...

  10. 小贝_mysql sql语句优化过程

    sql语句优化 一.SQL优化的一般步骤 (1).通过show status命令了解各种SQL的运行频率. (2).定位运行效率较低的SQL语句-(重点select) (3).通过explain分析低 ...