• table行的上移下移 上下移动


    <script type="text/javascript">

        $(document).ready(function () {
            $('.moveup').bind('click', function (e) {
                var obj = $(e.target).closest('tr');
                c_pre($(obj[0]));
            });

            $('.movedown').bind('click', function (e) {
                var obj = $(e.target).closest('tr');
                c_next($(obj[0]));
            });

        });

        function c_pre(o) {
            var pres = o.prevAll('tr.queue');
            if (pres.length > 0) {
                var tmp = o.clone(true);
                var oo = pres[0];
                o.remove();
                $(oo).before(tmp);
            }
        }

        function c_next(o) {
            var nexts = o.nextAll('tr.queue');
            if (nexts.length > 0) {
                var tmp = o.clone(true);
                var oo = nexts[0];
                o.remove();
                $(oo).after(tmp);
            }
        }
        function c_end(o) {
            var nexts = o.nextAll('tr.queue');
            if (nexts.length > 0) {
                var tmp = o.clone(true);
                var oo = nexts[nexts.length - 1];
                o.remove();
                $(oo).after(tmp);
            }
        }
        function addToQue(e) {
            var otd = $(e).closest('td');
            var otr = $(e).closest('tr');
            $(otd).empty();
            $(otr).find('td.sort').append($('#MovContHid').children().clone(true));
            $(otr).attr('class', "queue");
            $(otr).find('.status').html('排队等候');
            var checkStr = "";
            if ($('#CheckAll').attr('checked')) checkStr = 'checked="checked"';
            $(otr).find('td.sel').html('<input type="checkbox" ' + checkStr + '/>');
            c_end($(otr));
            return false;
        }


        function removeTR() {
            $('tr.queue>td.sel>:input:checked').closest('tr').remove();
        }
    </script>
    <style type="text/css">
        .tab{ border-collapse: collapse; 80%; text-align:center}
        .tab td{ height:30px}
    #MovContHid{ display:none}
    </style>

    <body>
        <h1>
            结果数据</h1>
            <hr />
            <table class="tab"
            cellspacing="0" cellpadding="0" border="1" bordercolor="#000000;">
             <tr style=" font-weight:bold;"><td></td>
              <td>No</td><td>打印指令</td><td>说明</td><td width="50px">启动</td><td>状态</td>
              <td>排序</td><td>文件</td><td>日志</td>
             </tr>
             <tr><td class="sel"></td>
              <td>1</td><td>BA新单20121023</td><td>外包商-施乐</td><td></td>
              <td><span style="color:green" class="status">正常完成</span></td>
               <td class="sort"></td><td> <a href="#"><img border="0" style="vertical-align:text-bottom" src="Images/ICON/txt.GIF" />下载</a></td><td><a href="#">查看</a></td>
             </tr>
             <tr><td class="sel"></td>
              <td>2</td><td>年缴</td><td>外包商-施乐</td><td><asp:Button ID="Button2" runat="server" OnClientClick="return addToQue(this)" Text="重启" /></td>
              <td><span style="color:red" class="status">执行失败</span></td>
              <td class="sort"></td><td></td><td><a href="#">查看</a></td>
             </tr>
             <tr><td class="sel"></td>
              <td>3</td><td>BA续期20121023</td><td>外包商-施乐</td><td></td>
              <td><span style="color:#ff9955" class="status">正在处理</span></td>
              <td class="sort"></td><td></td><td></td>
             </tr>
             <tr class="queue"><td class="sel"><input type="checkbox"/></td>
              <td>4</td><td>TM短期月缴A模块20121023</td><td>外包商-施乐</td><td></td>
              <td class="status">排队等候</td>
              <td class="sort"><input type="button" class="moveup" value="上移" /><input type="button" class="movedown" value="下移" /></td><td></td><td></td>
             </tr>
             <tr class="queue"><td class="sel"><input type="checkbox"/></td>
              <td>5</td><td>TM短期月缴B模块20121023</td><td>外包商-施乐</td><td></td>
              <td class="status">排队等候</td>
              <td class="sort"><input type="button" class="moveup" value="上移" /><input type="button" class="movedown" value="下移" /></td><td></td><td></td>
             </tr>
             <tr><td class="sel"></td>
              <td>6</td><td>TM短期月缴C模块20121023</td><td>外包商-施乐</td><td><asp:Button ID="Button3" runat="server" OnClientClick="return addToQue(this)" Text="重启" /></td>
              <td class="status">暂停打印</td>
              <td class="sort"></td><td></td><td></td>
             </tr>
             <tr><td><input id="CheckAll" type="checkbox"  onclick="$('.sel>[type=checkbox]:input').attr('checked', this.checked);" />全选</td><td colspan="10" align="center" style="height:40px"><input type="button" onclick="removeTR()" value="移除选中指令" /></td></tr>
            </table>

            <div id="MovContHid"><input type="button" class="moveup" value="上移" /><input type="button" class="movedown" value="下移" /></div>
    </body>

  • 相关阅读:
    搭建SpringCloud之注册中心Eureka
    学习角色管理模块错误总结---基于SpringMVC框架
    【转】Eclipse 单步调试
    [转]MyBatis的foreach语句详解
    解决pom.xml文件 ---- web.xml is missing and <failOnMissingWebXml> is set to true
    解决Dynamic Web Module 3.0 Requires Java 1.6 or newer
    用maven在eclipse用spring建javaweb工程(一)
    【转载】Eclipse 断点调试
    学习大神笔记之“MyBatis学习总结(三)”
    学习大神笔记之“MyBatis学习总结(二)”
  • 原文地址:https://www.cnblogs.com/dashi/p/4034676.html
Copyright © 2020-2023  润新知