zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    word设置的密码忘了怎么办?
    Navicat Report Viewer 设置 HTTP 的方法
    如何处理Navicat Report Viewer 报表
    excel密码忘记了怎么办
    Beyond Compare文本比较搜索功能详解
    Popular Cows POJ
    Problem B. Harvest of Apples HDU
    网络流模型整理
    The Shortest Statement CodeForces
    Vasya and Multisets CodeForces
  • 原文地址:https://www.cnblogs.com/dashi/p/4034676.html
Copyright © 2011-2022 走看看