<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <input type="text" placeholder="行数rows" name="rows">
    <input type="text" placeholder="列数cols" name="cols">
    <button>生成</button>
    <div id="box" style="overflow: hidden"></div>
    <script>
        $("button:first").click(function(){
            $("#box").html("");     //important
            var row = $("input[name='rows']").val();
            var col = $("input[name='cols']").val();
            $("#box").append("<table></table>");
            for(var i = 0;i < row;i++){
                $("table").append("<tr></tr>");
            }
            for(var j = 0;j < col;j++){
                $("tr").append("<td></td>");
            }
            $("td").css({"width":"100px","height":"30px","border":"1px solid #53a9ff"});
            $("tr").append("<button class='del' name='new'>删除</button>");
            $("tr").append("<button class='add' name='new'>增加下一行</button>");
            $("tr").append("<button class='add2' name='new'>增加上一行</button>");
            $("button[name='new']").css({"height":"34px","border":"1px solid #53a9ff","backgroundColor":"white"});
            $("button[class='del']").click(function(){
                $(this).parent().detach();
            });
            $("button[class='add']").click(function(){
                var newtr = $(this).parent().clone("true");
                $(newtr).css("background","orange");        //???只想给tr下的td背景色，但是此时tr被赋值给变量newtr
                $(this).parent().after(newtr);
            });
            $("button[class='add2']").click(function(){
                var newtr = $(this).parent().clone("true");
                $(newtr).css("background","#00da96");
                $(this).parent().before(newtr);
            });
            $("td").click(function(){
                var that = this;
                var content = $(this).text();
                $(this).html("");
                $(this).append("<input type='text' class='create'>");
                $("input[class='create']").focus().val(content);
                $("input[class='create']").css({"width":"98px","height":"26px","border":"1px solid #53a9ff"});
                $($("input[class='create']")).click(function(ev){
                    ev.stopPropagation();
                });
                $($("input[class='create']")).blur(function(){
                    $(that).html($("input[class='create']").val());
                });
            });
        });

    </script>
</body>
</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. Python有了asyncio和aiohttp在爬虫这类型IO任务中多线程/多进程还有存在的必要吗？

    最近正在学习Python中的异步编程,看了一些博客后做了一些小测验:对比asyncio+aiohttp的爬虫和asyncio+aiohttp+concurrent.futures(线程池/进程池)在效 ...

  2. MySql语句中select可以嵌套么，字段的重命名可以用中文么

    今天文档中看到的查询语句,SELECT后面又跟了一个SELECT嵌套,而且把字段重命名为中文,请问可以这样做么 MySql语句中select可以嵌套么,字段的重命名可以用中文么 >> my ...

  3. 归档备份被删，GoldenGate无法抽取数据

    发生错误如下,源端EXTRACT进程异常中止,查看日志,发现如下错误. 2014-07-23 01:32:13  ERROR   OGG-00446  Oracle GoldenGate Captur ...

  4. PHPSTORM+Xdebug断点调试代码

    如果没有安装 PHPSTORM 可以参考 phpstorm10安装并汉化 一.下载 XDEBUG 下载地址:https://xdebug.org/download.php 二.如何快速寻找适合自己PH ...

  5. OpenJDK源码研究笔记(八)-详细解析如何读取Java字节码文件(.class)

    在上一篇OpenJDK源码研究笔记(七)–Java字节码文件(.class)的结构中,我们大致了解了Java字节码文件的结构. 本篇详细地介绍了如何读取.class文件的大部分细节. 1.构造文件  ...

  6. HDU 4976 A simple greedy problem. 贪心+DP

    题意: 给定n<=1000个小兵,A每次都能使小兵掉1点血,B每次能使所有小兵掉1点血,A.B轮流攻击,每次轮到A他会选择是否攻击,轮到B必须攻击.求A最多能杀死多少小兵.(当小兵血量为1时被攻 ...

  7. 用typename和template消除歧义

  8. 为OLED屏添加GUI支持3：字库

    为OLED屏添加GUI支持3:字库 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:STM3 ...

  9. cocos2d-x 学习资源整理（持续更新...）

    生活像一把无情刻刀.改变了我们模样.以前我以为会亘古不变的东西,突然在一瞬间失去了信念... 假设你改变不了生活中患得患失的心情.那就试着让自己变得强大一点.由于能做到不以物喜不以己悲都是建立在强大的 ...

  10. 异步FIFO及verilog原码

    这几天看了Clifford E. Cummings的两篇大作<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...