转载收藏于：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. Spark SQL 编程API入门系列之Spark SQL的作用与使用方式

    不多说,直接上干货! Spark程序中使用SparkSQL 轻松读取数据并使用SQL 查询,同时还能把这一过程和普通的Python/Java/Scala 程序代码结合在一起. CLI---Spark ...

  2. SQL*PLUS命令的使用大全

    Oracle的sql*plus是与oracle进行交互的客户端工具.在sql*plus中,可以运行sql*plus命令与sql*plus语句. 我们通常所说的DML.DDL.DCL语句都是sql*pl ...

  3. BZOJ4819: [Sdoi2017]新生舞会(01分数规划)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1029  Solved: 528[Submit][Status][Discuss] Descripti ...

  4. jQuery应用实例2：简单动画

    效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. android夜间模式切换

    1.记录个最简单的夜间模式的实现 2.styles.xml <style name="DayTheme" parent="AppTheme"> &l ...

  6. ScSPM & LLC

    为啥会有SPM→ScSPM呢?原因之一是为了寻找better coding + better pooling的方式提高性能,原因之二就是提高速度.如何提高速度?这里的速度,不是Coding+Pooli ...

  7. Thingworx SDK开发自定义Widget

    Thingworx自带的图表数量有限,样式也很有限,在echarts上看到了这样一个非常简单的图表,下面将做一个简单的静态引入示范 首先创建Thingworx项目 然后右键ui新建widget 自动生 ...

  8. Console.WriteLine 不会输出到unity控制台

    1,Console.WriteLine() 是输出到控制台程序(console application)的命令 2,Unity中控制台是一个独立的程序,要想输出到Unity控制台需要使用Debug.L ...

  9. Hihocoder1350-Binary Watch

    时间限制:10000ms单点时限:1000ms内存限制:256MB 描述 Consider a binary watch with 5 binary digits to display hours ( ...

  10. c/c++连接mysql数据库设置及乱码问题（vs2013连接mysql数据库，使用Mysql API操作数据库）

    我的安装环境: (1)vs2013(32位版) (vs2013只有32位的 没有64位的,但是它可以编译出64位的程序)  : (2)mysql-5.7.15(64位) vs2013中的设置(按步骤来 ...