最近做一个项目,需要对表格进行增行和删行。

研究了一下jquery操作dom的方法和事件委托原理,下面是我编写的例子,源码传上,欢迎高手指点。

功能:

支持在指定行下面增行;

支持删行指定行;

增行、删行后自动计算序号;使用table背景设置表格边框;

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Examples</title>
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <link href="" rel="stylesheet">
  10. <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  11. <style type="text/css">
  12. body{
  13. font-size: 16px;
  14. }
  15. a{
  16. text-decoration:none;
  17. }
  18. div.wrap{
  19. width:%;
  20. margin: auto;
  21. }
  22. table.list{
  23. background-color: black;
  24. width:%;
  25. }
  26. table.list td,table.list th{
  27. background-color: white;
  28. width:%;
  29. line-height: 2em;
  30. }
  31. .hidden{
  32. display:none;
  33. }
  34. .center{
  35. text-align: center;
  36. }
  37. .orange{
  38. color:orange;
  39. }
  40. a:hover{
  41. color:blue;
  42. font-weight: bold;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div class="wrap">
  48. <div class="list">
  49. <h1 class="center">表格插件</h1>
  50. <p class="orange">支持增行、删行</p>
  51. <table class="list" >
  52. <thead>
  53. <tr>
  54. <th>序号</th>
  55. <th>姓名</th>
  56. <th>成绩</th>
  57. <th><a href="#" class="add">增行</a></th>
  58. <th></th>
  59. </tr>
  60. </thead>
  61. <tbody>
  62. <tr class="trmodle hidden">
  63. <td class="center"></td>
  64. <td>
  65. <select name="" id="">
  66. <option value="">张三</option>
  67. <option value="">李四</option>
  68. <option value="">王五</option>
  69. <option value="">赵五</option>
  70. </select>
  71. </td>
  72. <td><input type="text" value="" /></td>
  73. <td class="center"><a href="#" class="add">增行</a></td>
  74. <td class="center"><a href="#" class="del">删行</a></td>
  75. </tr>
  76. </tbody>
  77. </table>
  78. </div>
  79. </div>
  80. </body>
  81. <script type="text/javascript">
  82. $(function(){
  83. //使用事件委托:解决新增元素事件绑定问题
  84. $("table.list").on("click",function(e){
  85. //console.log(e);
  86. var v = e.target||srcElement;
  87. if(v.nodeName.toLowerCase()=="a"){
  88. //增行
  89. if(v.className=="add"){
  90. //复制模板行数据
  91. var n = "<tr>"+$(".trmodle").eq().clone().html()+"</tr>";
  92. //找到父级元素中的tr,然后在后面增加增行
  93. $(v).parent().parent().after(n);
  94. setIndex();
  95. }
  96. //删行
  97. if(v.className=="del"){
  98. $(v).parent().parent().remove();
  99. setIndex();
  100. }
  101. }
  102. });
  103. });
  104. //组织序号
  105. function setIndex() {
  106. var t = $("table.list tr");
  107. t.each(function () {
  108. $(this).children("td").eq().text($(this).index());
  109. })
  110. }
  111. </script>
  112. </html>

效果图:

aaarticlea/png;base64,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" alt="" />

表格(table) 插件:支持当前行增行、删除。使用事件委托的更多相关文章

  1. Web开发——HTML基础(HTML表格 <table>)

    参考: 表格属性参考:http://www.w3school.com.cn/tags/tag_table.asp 目录: 1.举例 2.表格 2.1 表格属性 2.2 表格的表头 2.3 表格中的空单 ...

  2. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  3. FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

    这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...

  4. QRowTable表格控件-支持hover整行、checked整行、指定列排序等

    目录 一.开心一刻 二.嘴一嘴 三.效果展示 四.浅谈实现 五.自定义数据源 1.data函数 2.flags函数 六.自定义视图 1.目的 2.问题分析 七.测试 八.相关文章 原文链接:QRowT ...

  5. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...

  6. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  7. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  8. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  9. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

随机推荐

  1. achartengine andorid图像引擎入门

    最近在帮机械学院开发一个app 用了第三方的图像引擎——achartengine功能还算强大(虽然相比于Html那些第三方图像引擎还是差点不过也够用了) 入门: 参考http://blog.csdn. ...

  2. ios 75个工具

    如果你去到一位熟练的木匠的工作室,你总是能发现他/她有一堆工具来完成不同的任务.   软件开发同样如此.你可以从软件开发者如何使用工具中看出他水准如何.有经验的开发者精于使用工具.对你目前所使用的工具 ...

  3. HDU 5145 - NPY and girls

    题意: cases T(1≤T≤10) (0<n,m≤30000) (0<ai≤30000)    n个数ai 表示n个女孩所在教室 m次询问 [L,R](1 <= L <= ...

  4. shopnc 商家中心添加打印商品二维码功能

    需求中提到需要增加每一件商品可以打印,用于线下体验店实体商品的二维码标签,客人可以根据手机扫二维码功能进行购买 任务描述: 1.如附件实现”批量打印标签“和单个商品”打印“标签功能. 2.标签有两种” ...

  5. 表达式 - PHP手册笔记

    PHP是一种面向表达式的语言.表达式的定义可以描述为,任何有值的东西. PHP支持全等运算符===(值和类型均相同)和非全等运算符!==(值或者类型不同). PHP的三元条件运算符貌似和C语言不太一样 ...

  6. Oracle EBS-SQL (MRP-4):检查例外信息查询_建议取消_采购申请.sql

    select msi.segment1                    编码 ,msi.description                  描述 ,mr.old_order_quantit ...

  7. html5 web worker

    A web worker is a JavaScript running in the background, without affecting the performance of the pag ...

  8. 读<<代码整洁之道>>的感想

    花去了近一周的时间浏览一下这本书.总体感觉这本书写得不错. 我发现自己以前写的代码时多么的糟糕.有很多改进之处... 同时我也发现写出优秀的代码不易.优秀的代码不仅仅易读,并且易修改,易维护,程序易维 ...

  9. Android-PullToRefresh下拉刷新库基本用法

    How:(使用) 转自:http://blog.csdn.net/hantangsongming/article/details/42490277 PullToRefresh是一套实现非常好的下拉刷新 ...

  10. KnockOutJS学习系列----(一)

    原文地址:http://www.cnblogs.com/n-pei/archive/2011/12/23/2299217.html 好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. ...