zoukankan      html  css  js  c++  java
  • 表格数据上下行互换位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表格数据上下行互换位置</title>
        <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //上移
                $("input.upbtn").each(function () {
                    $(this).click(function () {
                        var $tr = $(this).parents("tr");
                        if ($tr.index() != 0) {
                            $tr.prev().before($tr);
                        }
                    });
                });
                //下移
                var trLength = $("input.downbtn").length;           
                $("input.downbtn").each(function () {
                    $(this).click(function () {
                        var $tr = $(this).parents("tr");                  
                        if ($tr.index() != trLength - 1) {                      
                            $tr.next().after($tr);
                        }
                    });
                });
            });
        
        </script>
    </head>
    <body>
    <table border="1" cellpadding=0 cellspacing=0>
        <tr>
            <td>6</td>
            <td>xxxx66xxx</td>
            <td>2013-5-26</td>
            <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
        </tr>
        <tr>
            <td>7</td>
            <td>xxxx77xxx</td>
            <td>2013-5-27</td>
            <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
        </tr>
        <tr>
            <td>8</td>
            <td>xxx88xxxx</td>
            <td>2013-5-28</td>
            <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
        </tr>
    </table>
    </body>
    </html>


  • 相关阅读:
    报名用户主题看板
    有效线索主题看板 阿善有用 清洗转换具体怎么做
    意向客户主题看板 阿善看到 阿善用到 拉链表
    数据库建模 全量表导入
    git 阿善有用
    IDEA+git+码云
    Cloudera Manager的基本使用 阿善没用
    cloudera manager报错解决方案
    java-多态简述及实例
    java-简述接口及实例
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061103.html
Copyright © 2011-2022 走看看