1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>table</title>
  6.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  7. </head>
  8. <body>
  9.     <input type="text" placeholder="行数rows" name="rows">
  10.     <input type="text" placeholder="列数cols" name="cols">
  11.     <button>生成</button>
  12.     <div id="box" style="overflow: hidden"></div>
  13.     <script>
  14.         $("button:first").click(function(){
  15.             $("#box").html("");     //important
  16.             var row = $("input[name='rows']").val();
  17.             var col = $("input[name='cols']").val();
  18.             $("#box").append("<table></table>");
  19.             for(var i = 0;i < row;i++){
  20.                 $("table").append("<tr></tr>");
  21.             }
  22.             for(var j = 0;j < col;j++){
  23.                 $("tr").append("<td></td>");
  24.             }
  25.             $("td").css({"width":"100px","height":"30px","border":"1px solid #53a9ff"});
  26.             $("tr").append("<button class='del' name='new'>删除</button>");
  27.             $("tr").append("<button class='add' name='new'>增加下一行</button>");
  28.             $("tr").append("<button class='add2' name='new'>增加上一行</button>");
  29.             $("button[name='new']").css({"height":"34px","border":"1px solid #53a9ff","backgroundColor":"white"});
  30.             $("button[class='del']").click(function(){
  31.                 $(this).parent().detach();
  32.             });
  33.             $("button[class='add']").click(function(){
  34.                 var newtr = $(this).parent().clone("true");
  35.                 $(newtr).css("background","orange");        //???只想给tr下的td背景色，但是此时tr被赋值给变量newtr
  36.                 $(this).parent().after(newtr);
  37.             });
  38.             $("button[class='add2']").click(function(){
  39.                 var newtr = $(this).parent().clone("true");
  40.                 $(newtr).css("background","#00da96");
  41.                 $(this).parent().before(newtr);
  42.             });
  43.             $("td").click(function(){
  44.                 var that = this;
  45.                 var content = $(this).text();
  46.                 $(this).html("");
  47.                 $(this).append("<input type='text' class='create'>");
  48.                 $("input[class='create']").focus().val(content);
  49.                 $("input[class='create']").css({"width":"98px","height":"26px","border":"1px solid #53a9ff"});
  50.                 $($("input[class='create']")).click(function(ev){
  51.                     ev.stopPropagation();
  52.                 });
  53.                 $($("input[class='create']")).blur(function(){
  54.                     $(that).html($("input[class='create']").val());
  55.                 });
  56.             });
  57.         });
  58.  
  59.     </script>
  60. </body>
  61. </html>

　　

分享一个表格插入和删除编辑功能用jQuery实现的更多相关文章

  1. 分享一个Winform里面的HTML编辑控件Zeta HTML Edit Control，汉化附源码

    我们知道,Web开发上有很多HTML的编辑控件,如FCKEditor.CKEditor.kindeditor等等,很多都做的很好,而虽然Winform里面有WebBrowser控件,但是默认这个控件是 ...

  2. easyui的datagrid用js插入数据等编辑功能的实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. layui表格的新增和编辑功能前端代码

    html页面的代码(注意:引入layui相关的css): <div class="layui-form-item"> <label class="lay ...

  4. 分享一个JS的Base64加密解密功能

    代码实现: var base64 = (function () { var encodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop ...

  5. Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程

    10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...

  6. Swift - 给表格添加编辑功能（删除，插入）

    1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...

  7. swift - 表格的编辑功能（添加、删除）

    表格(tableview)的确是一个很好用的控件,现在来实现一个编辑功能的实现,包含添加和删除,删除包括长按删除和左滑删除 效果图如下: 具体代码如下: 1.创建表格(这个表格有2个区,有区头和区尾) ...

  8. ListView 分页 排序、编辑、插入和删除

    摘自网络地址:http://msdn.microsoft.com/zh-cn/magazine/cc337984.aspx ListView 基础 ListView 是模板驱动的控件,这意味着它默认情 ...

  9. JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

随机推荐

  1. 范型在java中的应用

    根据泛型在java中的不同位置,大致可以分为类泛型.方法泛型和接口泛型.以下三个Demo基本展现三种泛型的用法,其中接口泛型又分两种情况描述.类泛型和方法泛型 import java.util.Arr ...

  2. del_archivelog

    #!/usr/bin/env bash                          #  # INTRO : The script for delete physical standby app ...

  3. caffe(5) 其他常用层及参数

    本文讲解一些其它的常用层,包括:softmax_loss层,Inner Product层,accuracy层,reshape层和dropout层及其它们的参数配置. 1.softmax-loss so ...

  4. JavaScript知识复习

    JavaScript 数据类型 原始数据类型: number string boolean null undefined 对象:object: Function Array Date... 共有六种数 ...

  5. git rebase 的使用 (用于撤销某次commit)

    Q: I wrote the wrong thing in a commit message. Alternatively, I've forgotten to include some files. ...

  6. ImageLoader的简单分析(二)

    在<ImageLoader的简单分析>这篇博客中对IImageLoader三大组件的创建过程以及三者之间的关系做了说明.同一时候文章的最后也简单的说明了一下ImageLoader是怎么通过 ...

  7. 赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

  8. 书剑恩仇录online全套源代码（服务端+client+文档）

    书剑恩仇录online全套源代码(服务端+client+文档).vc++开发,解压后将近10G大小,眼下网上最完整版本号,包括client源代码.服务端源代码.工具源代码.sdk.文档-- <书 ...

  9. 在Fedora18上配置个人的Hadoop开发环境

    在Fedora18上配置个人的Hadoop开发环境 1.    背景 文章中讲述了类似于"personalcondor"的一种"personal hadoop" ...

  10. linux和unix的对照

    在之前的博客中说到,linux是一个单一内核的操作系统,但它与传统的单一内核UNIX操作系统不同. 在普通单一内核系统中,全部内核代码都是被静态编译和链接的. 而在linux中,能够动态的装入和卸载内 ...