转载收藏于：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. tomcat映射路径（应用程序基本目录）的配置方法

    tomcat映射路径的配置方法 一.默认配置 位置:/conf 文件夹里的server.xml文件 <Host appBase="webapps"> appBase:可 ...

  2. 【转】SQL语句删除和添加外键、主键

    --删除外键 语法:alter table 表名 drop constraint 外键约束名 如: alter table Stu_PkFk_Sc drop constraint FK_s alter ...

  3. js获取浏览器缩放比例

    前几天在做项目的时候遇到浏览器缩放比例不为100%时,出来的页面不正常,于是找到了方法获取其比例来通知用户 function detectZoom (){ , screen = window.scre ...

  4. 大话主席（superslide和 touchslide）插件的使用

    对于实现效果来说,插件的办事效率真的是太高了,而且里边也被处理过兼容性,用起来实在是特别方便,现在我们来说说大话主席中的slide插件,它分为pc端(superslide)和移动端(touchslid ...

  5. Python内置数据结构之字典dict

    1. 字典 字典是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.键可能是数(整数索引).字符串或元组.字典(日常生活中的字典和Python字典)旨在让你能够轻松地找到特定的单 ...

  6. to_string函数（将数字转换成字符串）

    一般常用的转换字符串的方法std::stringstream,但是效率较低;目前C ++11提供了std::to_string 效率方面:C风格的sprintf()没有动态分配内存效率最高;std:: ...

  7. Sona && Little Elephant and Array && Little Elephant and Array && D-query && Powerful array && Fast Queries (莫队)

    vjudge上莫队专题 真的是要吐槽自己(自己的莫队手残写了2个bug) s=sqrt(n) 是元素的个数而不是询问的个数(之所以是sqrt(n)使得左端点每个块左端点的范围嘴都是sqrt(n)) 在 ...

  8. why updating the Real DOM is slow, what is Virtaul DOM, and how updating Virtual DOM increase the performance?

    个人翻译: Updating a DOM is not slow, it is just like updating any JavaScript object; then what exactly ...

  9. 利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记

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

  10. Python-基础-day4

    深浅copy 1.先看赋值运算 h1 = [1,2,3,['aihuidi','hhhh']] h2 = h1 h1[0] = 111 print(h1) print(h2) #结果: # [111, ...