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; width: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>
相關推薦
table行的上移下移 上下移動
<script type="text/javascript"> $(document).ready(function () { $('.moveup').bind('click', function (e) { v
js table 行上移、下移
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
js 實現 table 行上移 （資料庫）
通過js實現表格行的上下移動，有兩種情況： 1、只對顯示層操作（即只針對頁面的移動並不更新到資料庫） 2、顯示層的移動更新到資料庫中 下面我分佈就這兩種方式的實現進行說明（我使用的是jquery ea
【Axure】--repeater（中繼器）實現行上移下移
案例效果： 案例描述： 點選上下移動的按鈕，移動相應題型順序。 元件準備： 上移、下移圖示： Repeater: Table做表頭： 題型編號： 操作步驟： 雙擊進入Repeater
GridView 行交換 GridView 行上移下移
using System; using System.Configuration; using System.Data; //using System.Linq; using System.Web; using System.Web.Security; using Syst
jquery操作table 資料行拷貝，和上下移動
業務需求,選擇未選素材新增到已選素材，已選素材支援上下移動。 // 選擇素材 $("#btnSelect").click(function() { $("#notConfigDataTbody input:checkbox:checked").each(func
js操作table中tr的順序，實現上移下移一行的效果
總體思路是在table外部加個div，修改div的innerHtml實現改變tr順序的效果 具體思路是 獲取當前要移動tr行的rowIndex，在table中刪除掉，然後迴圈table的rows，到了目標行再直接加進去，最後把整體的html賦值給div完成效果 js程式碼如下 /
滑鼠拖拽表格table的tr上下移動
小夥伴們肯定在某個專案裡遇到要拖拽table表格的tr或者td那麼下面就來講一下，話不多說直接上程式碼1，引用外掛<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script
JQuery 實現表格資料行上移與下移效果
效果展示 程式碼實現 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 條紋表格</t
easyui datagrid實現單行的上移下移，以及儲存移動的結果
開始接觸easyui感覺他的封裝真是極佳的，善假於物的思想使我們善於站在巨人的肩膀上，人家封裝好這麼好的外掛直接讓俺們使用，我們在需求不同可進行簡單的調整。 </span>//調整展示次序載入圖片 function UpDownFormat(va
Vue實現table上下移動
結合Element元件，scope中有三個引數（row，cow，$index）分別表示行內容、列內容、以及此行索引值， table上繫結陣列 :data=“tableList” <el-table :data="tableList"> </el
JS控制HTML表格行上下移動
[b]補充一下：[/b]重新調整了CSS和JS的瀏覽器相容，希望大家多多指教，ThankYou！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xht
xcode 設定快捷鍵 整行上下移動
設定整行程式碼上下移動： 找到Xcode中的自帶的配置檔案： /Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Versions/A/ Resources/IDETextKeyBindingSet.plist 用文字編輯
GridView 行交換 ,上移 下移
1.以下為Default.aspx程式碼: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <html xmlns="[url]http://w
jquery 刪除table行,該如何解決
刪除 ble libs 解決方案 function spa pre 動態 func query 刪除table行< table > < tbody > < tr > < td > 這行原來就有 </ td >
AngularJS實現數據列表的增加、刪除和上移下移等功能實例
enter 基礎 round 電子郵件 color bsp 基礎功 net 效果圖 轉： http://www.jb51.net/article/91991.htm 這篇文章給大家分享了AngularJS循環實現數據列表的增加、刪除和上移下移等基礎功能，對大家學習Ang
jquery實現上下移動div可以用這種方法
style before nts span spa blog query urb ext //上移 $(‘.add_small_wrap‘).on(‘click‘, ‘.shangyi‘, function(){ var $curBlock = $(this).paren
bootstrap-table 行內編輯
根據 ext ots json fail defined www. edi .html 所需的樣式和js文件： https://pan.baidu.com/s/1eSAKzyM 密碼: s3wh 參考 ： http://www.cnblogs.com/landeanfen/
[iOS11] contentInsetAdjustmentBehavior 問題, push back時, 界面會上下移動.
text iap nav 需要 tac del http XML gate https://stackoverflow.com/questions/45573829/weird-uitableview-behaviour-in-ios11-cells-scroll-up-w
Angular 2 樹節點的上下移動問題
flow multiple tex wid post nodes body get left 最近在做一個樹節點的上下移動然後實現排序的問題。直接看圖： 實現已選查詢條件的上下移動。結合了primeng 的picklist 組件。 下面是html代碼 <p