转载收藏于：https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html

效果图：

 

Html：
<html>

<head>
    <title>jquery表格操作</title>
    <script language="javascript" src="jquery.table.tr.js"></script>
    <style type="text/css">
        table
        {
            border: black solid 1px;
            border-collapse: collapse;
        }
        td
        {
            border: black solid 1px;
            padding: 3px;
        }
        .td_Num
        {
            width: 60px;
            text-align: center;
        }
        .td_Item
        {
            width: 160px;
            text-align: center;
        }
        .td_Oper
        {
            width: 120px;
            text-align: center;
        }
        .td_Oper span
        {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class='td_Num'>
                序号
            </td>
            <td class='td_Item'>
                步骤名称
            </td>
            <td class='td_Item'>
                步骤描述
            </td>
            <td class='td_Oper'>
                相关操作 <a href="#" onclick="add_line();">添加</a>
            </td>
        </tr>
    </table>
    <table id="content">
    </table>
    <input type="button" value="提交数据" id="btnSubmit" onclick="SaveData()" />
</body>
</html>
<script type="text/javascript">
    var currentStep = 0;
    var max_line_num = 0;
    //添加新记录
    function add_line() {
        max_line_num = $("#content tr:last-child").children("td").html();
        if (max_line_num == null) {
            max_line_num = 1;
        }
        else {
            max_line_num = parseInt(max_line_num);
            max_line_num += 1;
        }
        $('#content').append(
        "<tr id='line" + max_line_num + "'>" +
            "<td class='td_Num'>" + max_line_num + "</td>" +
            "<td class='td_Item'><input type='text' class='stepName' value='步骤名称" + max_line_num + "'></input></td>" +
            "<td class='td_Item'><input type='text' class='stepDescription' value='步骤描述" + max_line_num + "'></td>" +
            "<td class='td_Oper'>" +
                "<span onclick='up_exchange_line(this);'>上移</span> " +
                "<span onclick='down_exchange_line(this);'>下移</span> " +
                "<span onclick='remove_line(this);'>删除</span> " +
            "</td>" +
        "</tr>");
    }
    //删除选择记录
    function remove_line(index) {
        if (index != null) {
            currentStep = $(index).parent().parent().find("td:first-child").html();
        }
        if (currentStep == 0) {
            alert('请选择一项!');
            return false;
        }
        if (confirm("确定要删除改记录吗？")) {
            $("#content tr").each(function () {
                var seq = parseInt($(this).children("td").html());
                if (seq == currentStep) { $(this).remove(); }
                if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }
            });
        }
    }
 
    //上移
    function up_exchange_line(index) {
        if (index != null) {
            currentStep = $(index).parent().parent().find("td:first-child").html();
        }
        if (currentStep == 0) {
            alert('请选择一项!');
            return false;
        }
        if (currentStep <= 1) {
            alert('已经是最顶项了!');
            return false;
        }
        var upStep = currentStep - 1;
        //修改序号
        $('#line' + upStep + " td:first-child").html(currentStep);
        $('#line' + currentStep + " td:first-child").html(upStep);
        //取得两行的内容
        var upContent = $('#line' + upStep).html();
        var currentContent = $('#line' + currentStep).html();
        $('#line' + upStep).html(currentContent);
        //交换当前行与上一行内容
        $('#line' + currentStep).html(upContent);
        $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
        $('#line' + upStep).css("background-color", "yellow");
        event.stopPropagation(); //阻止事件冒泡
    }
 
    //下移
    function down_exchange_line(index) {
        if (index != null) {
            currentStep = $(index).parent().parent().find("td:first-child").html();
        }
        if (currentStep == 0) {
            alert('请选择一项!');
            return false;
        }
        if (currentStep >= max_line_num) {
            alert('已经是最后一项了!');
            return false;
        }
        var nextStep = parseInt(currentStep) + 1;
        //修改序号
        $('#line' + nextStep + " td:first-child").html(currentStep);
        $('#line' + currentStep + " td:first-child").html(nextStep);
        //取得两行的内容
        var nextContent = $('#line' + nextStep).html();
        var currentContent = $('#line' + currentStep).html();
        //交换当前行与上一行内容
        $('#line' + nextStep).html(currentContent);
        $('#line' + currentStep).html(nextContent);
 
        $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
        $('#line' + nextStep).css("background-color", "yellow");
        event.stopPropagation(); //阻止事件冒泡
    }
    //保存数据
    function SaveData() {
        var data = "<root>";
        $('#content tr').each(function () {
            data += "<item>";
            var stepName = $(this).find("td:eq(1)").find("input").val();
            var stepDescription = $(this).find("td:eq(2)").find("input").val();
            data += "   <stepName>" + stepName + "</stepName>";
            data += "   <stepDescription>" + stepDescription + "</stepDescription>";
            data += "<item>";
        });
        data += "</root>";
        alert(data);
    }
</script>

jquery动态表格，动态添加表格行的更多相关文章

  1. Word：表格前添加新行 + 删除表格后的空行

    本文适用于Word 2007 + Windows 7,造冰箱的大熊猫@cnblogs 2018/8/3 近日新学(百度到)两条新Word操作,记录下来以备查询 1.在表格前添加新行 场景:有没有遇到过 ...

  2. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  3. 一个word文档中，多个表格的批量调整（根据窗口调整表格和添加表格水平线）

    Sub 自动调整所有表格() ' ' 自动调整所有表格 宏 ' 'Application.Browser.Target = wdBrowseTable For i = 1 To ActiveDocum ...

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  6. JQuery动态添加表格，然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  7. jQuery动态添加表格1

    用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...

  8. 基于jquery的表格动态创建，自动绑定，自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  9. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  10. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

随机推荐

  1. php链接memcache操作

    设置值 set key 压缩标识 有效期 长度 set name 0 60 5 hello 压缩标识:用于告诉memcached服务器是否压所后存储数据,目的是为了节省磁盘空间,压所和解压缩会消耗时间 ...

  2. c# rc4算法，加密解密类

    rc4算法,原理,以密匙生成256位的密匙流,然后以车轮式滚过源数据异或加密. /* * 由SharpDevelop创建. * 用户: YISH * 日期: 04/04/2015 * 时间: 03:0 ...

  3. Codeforces Round #506 (Div. 3) A-C

    CF比赛题解(简单题) 简单题是指自己在比赛期间做出来了 A. Many Equal Substrings 题意 给个字符串t,构造一个字符串s,使得s中t出现k次;s的长度最短 如t="c ...

  4. BootStrap复习总结

    Bootstrap3 复习总结: 1. 栅格系统: sm:768px md:992px lg:1200px (响应式布局) 1.横向分割页面的空间. 2.在分割的同时考虑到响应式. 内部实现是12列的 ...

  5. HDU 2669 Romantic（ 拓欧水 ）

    链接:传送门 题意:求解方程 X * a + Y * b = 1 的一组最小非负 X 的解,如果无解输出 "sorry" 思路:裸 exgcd /***************** ...

  6. HDU 1348 Wall （ 凸包周长 ）

    链接:传送门 题意:给出二维坐标轴上 n 个点,这 n 个点构成了一个城堡,国王想建一堵墙,城墙与城堡之间的距离总不小于一个数 L ,求城墙的最小长度,答案四舍五入 思路:城墙与城堡直线长度是相等的, ...

  7. 【Codeforces Round #499 (Div. 2) E】Border

    [链接] 我是链接,点我呀:) [题意] 给你n个数字,每个数字可以无限用,每种方案可以组成一个和,问你%k的结果有多少种不同的结果. [题解] 相当于给你一个方程 \(x_1*a_1+x_2*a_2 ...

  8. 【【henuacm2016级暑期训练】动态规划专题 J】Red-Green Towers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然最多1000行的样子. 从上到小做dp 设f[i][j]为前i行,使用了j个红色方块的方案数. f[1][r] = 1;如果r& ...

  9. ASP.NET-常用插件集合

    001.输入表单验证插件FluentValidation ( 这个组建可以直接验证实体类,达到和验证model相同的效果,如果类很少可以直接使用这个省去model) https://github.co ...

  10. Floodlight 中创建消息对象的方法

            在 floodlight 中创建各种openflow message 和 action 等採用的是简单工厂方式.BasicFactory类(实现OFMessageFactory接口.) ...