上下移动表格行 - Jquery/Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4954373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-25 15:28:27 来源:igfitidea点击:
Move table rows up and down - Jquery/Javascript
提问by Ravi
Can anyone please tell me how to move table rows up and down through jQuery/Javascript.
谁能告诉我如何通过 jQuery/Javascript 上下移动表格行。
I have a table and for each row a radio button is there in the first td. On clicking the up/down arrows the selected rows should move up/down.
我有一张桌子，每行的第一个 td 中都有一个单选按钮。单击向上/向下箭头时，所选行应向上/向下移动。
Looking forward for some ideas...
期待一些想法......
回答by Stoive
First get the selected row:
首先获取选定的行：
var radio;
// assuming there's only one form in your page, replace 0 with whatever it is
// and inputs have name 'radioGroupName'
for (var i in document.forms[0].radioGroupName) {
if (documents.forms[0].radioGroupName[i].checked) {
radio = documents.forms[0].radioGroupName[i].parentNode.parentNode;
break;
}
}
To shift up:
上移：
var prev = radio.previousSibling;
var par = radio.parentNode;
if (prev) {
par.removeChild(radio);
par.insertBefore(radio, prev);
}
To shift down:
下移：
var next = radio.nextSibling;
var par = radio.parentNode;
par.removeChild(radio);
if (next.nextSibling)
par.insertBefore(radio, next.nextSibling);
else
par.appendChild(radio);
回答by Sparafusile
Here's a working example as requested by Nahom. It's an abbreviated version of what I'm using in my project. The green symbol on the right is for dragging, the red 'x' is for deleting.
这是 Nahom 要求的一个工作示例。这是我在我的项目中使用的缩写版本。右边的绿色符号是拖动，红色的“x”是删除。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body bgcolor=white>
<table width=100% height=100% cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding: 5px;" rowspan=2 height=99%>
<script language="JavaScript">
function get( e ){ return( document.getElementById( e ) ); }
function findPosX( obj )
{
var curleft = 0;
if( obj.offsetParent )
{
while( obj.offsetParent )
{
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if( obj.x ) curleft += obj.x;
return( curleft );
}
function findPosY( obj )
{
var curtop = 0;
if( obj.offsetParent )
{
while( obj.offsetParent )
{
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if( obj.y ) curtop += obj.y;
return( curtop );
}
function getClickX( e )
{
if( !e ) e = event;
var scrollLeft = document.body.scrollLeft;
if( scrollLeft <= 0 && document.documentElement )
{
scrollLeft = document.documentElement.scrollLeft;
}
return( e.clientX + scrollLeft );
}
function getClickY( e )
{
if( !e ) e = event;
var scrollTop = document.body.scrollTop;
if( scrollTop <= 0 && document.documentElement )
{
scrollTop = document.documentElement.scrollTop;
}
return( e.clientY + scrollTop );
}
window.onload = function()
{
addTask( "" );
};
document.onclick = function()
{
with( get("ControlDiv") )
{
style.visibility = "hidden";
}
}
function RowFromPos( table, x, y )
{
if( x >= findPosX( table ) && x < findPosX( table ) + table.clientWidth )
{
if( y >= findPosY( table ) && y < findPosY( table ) + table.clientHeight )
{
for( i = 0 ; i < table.rows.length ; i++ )
{
if( x >= findPosX( table.rows[i] ) && x < findPosX( table.rows[i] ) + table.rows[i].clientWidth &&
y >= findPosY( table.rows[i] ) && y < findPosY( table.rows[i] ) + table.rows[i].clientHeight )
{
return( i );
}
}
}
}
return( -1 );
}
var clickY = 0, dragRow = null;
function onDragBegin( row )
{
document.onmouseup = onDragDrop;
document.onmousemove = onDragDrag;
dragRow = row;
clickY = getClickY( event );
dragRow.style.backgroundColor = "gold";
}
function onDragDrag()
{
var curX = getClickX( event );
var curY = getClickY( event );
var rowIndex = RowFromPos( get("TaskTable"), curX, curY );
if( rowIndex != -1 && rowIndex != dragRow.rowIndex )
{
if( rowIndex < dragRow.rowIndex )
{
// Move Up
var parent = dragRow.parentNode;
var prev = dragRow.previousSibling;
if( prev )
{
parent.removeChild( dragRow );
parent.insertBefore( dragRow, prev );
}
}
else
{
// Move down
var next = dragRow.nextSibling;
var par = dragRow.parentNode;
par.removeChild( dragRow );
if( next.nextSibling )
{
par.insertBefore( dragRow, next.nextSibling );
}
else
{
par.appendChild( dragRow );
}
}
}
}
function onDragDrop()
{
document.onmouseup = null;
document.onmousemove = null;
dragRow.style.backgroundColor = "";
fixTable();
}
function addTask( task)
{
var table = get("TaskTable");
var row = table.insertRow( table.rows.length );
var cell = row.insertCell( row.cells.length );
cell.align = "right"; cell.vAlign = "bottom";
cell.width = "1%"; cell.noWrap = true;
cell.innerHTML = "<b>0.</b>";
cell = row.insertCell( row.cells.length );
cell.width = "99%";
var div = document.createElement("DIV");
div.designMode = "on";
div.contentEditable = true;
div.style.width = "99%";
div.style.height = "50px";
div.style.border = "1px solid black";
div.style.padding = "2px";
div.style.overflow = "scroll";
div.style.overflowX = "auto";
div.style.cursor = "text";
div.innerHTML = ( task != "" ? task : "<font color=\"gray\" face=\"Tahoma\">Enter task desciption here</font>" );
div.onfocus = function()
{
if( this.innerText == "Enter task desciption here" )
{
this.innerHTML = "";
}
event.cancelBubble = true;
showControlDiv( this );
}
div.onclick = function()
{
event.cancelBubble = true;
};
div.onblur = function()
{
if( this.innerText.replace(/^\s*/, "").replace(/\s*$/, "") == "" )
{
this.innerHTML = "<font color=\"gray\" face=\"Tahoma\">Enter task desciption here</font>";
}
}
div.onselectstart = function()
{
event.cancelBubble = true;
};
cell.appendChild( div );
cell = row.insertCell( row.cells.length );
cell.width = 15; cell.align = "right"; cell.vAlign = "bottom";
cell.innerHTML = "<font color=red face=Tahoma size=2 style='cursor: pointer;' onclick='JavaScript: deleteTask( this.parentElement.parentElement.rowIndex );'><b>X</b></a>";
var handle = document.createElement( "DIV" );
handle.innerHTML = "<font color=green size=6><b>*</b></font>";
handle.style.cursor = "n-resize";
handle.onmousedown = function()
{
onDragBegin( this.parentElement.parentElement );
};
cell.appendChild( handle );
fixTable();
}
function deleteTask( row )
{
get("TaskTable").deleteRow( row );
fixTable();
}
function deleteAll()
{
var table = get("TaskTable");
while( table.rows.length > 0 ) table.deleteRow( 0 );
}
function fixTable()
{
var numTask = 0;
var table = get("TaskTable");
for( var i = 0 ; i < table.rows.length ; i++ )
{
numTask++;
table.rows[i].cells[0].innerHTML = "<b>" + numTask + ".</b>";
}
}
function showControlDiv( parent )
{
var div = get("ControlDiv");
var x = findPosX( parent );
var y = findPosY( parent );
div.style.top = ( y - 39 ) + "px";
div.style.left = x + "px";
div.style.width = ( parent.offsetWidth - 17 ) + "px";
div.style.visibility = "visible";
}
</script>
<form method=post action="blah">
<div unselectable=on id=ControlDiv style=" visibility: hidden; position: absolute; top: -1000px; left: -1000px;; padding-top: 3px; padding-left: 15px; background-color: white; border: 1px solid black; border-bottom: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; width: 100%; height: 35px;">
<button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; document.execCommand( 'Bold' ); return( false );"><font size=4><b>B</b></b></font></button>
<button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; document.execCommand( 'Italic' ); return( false );"><font size=4><i>I</b></i></font></button>
<button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; document.execCommand( 'Underline' ); return( false );"><font size=4><u>U</b></u></font></button>
<!-- <button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; return( false );"><img src=images/img.bmp></button> -->
Font Face:
<select unselectable=on style="width: 200px; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true;" onchange="JavaScript: document.execCommand( 'FontName', false, this.value ); return( false );">
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Tahoma">Tahoma</option>
</select>
Font Size:
<select unselectable=on style="width: 75px;" onclick="JavaScript: event.cancelBubble=true;" onchange="JavaScript: document.execCommand( 'FontSize', false, this.value ); return( false );">
<option value=1>1 (8pt)</option>
<option value=2>2 (10pt)</option>
<option value=3 selected>3 (12pt)</option>
<option value=4>4 (14pt)</option>
<option value=5>5 (18pt)</option>
<option value=6>6 (24pt)</option>
<option value=7>7 (36pt)</option>
</select>
</div>
<br><br><br>
<table width=100% onselectstart="JavaScript: return( false );">
<tr>
<td width=1% nowrap><font size=5><b>Task List:</b></font></td>
<td width=33% align=center style="color: blue; font-family: Tahoma; cursor: pointer;" onclick="JavaScript: addTask( '', false );"><font size=5>+</font> Add Task</td>
<td width=33% align=center style="color: red; font-family: Tahoma; cursor: pointer;" onclick="JavaScript: if( confirm( 'Are you sure you want to delete all tasks from this template?' ) ) deleteAll();"><font size=2><b>X</b></font> Delete All</td>
</tr>
</table>
<table width=100% id=TaskTable cellspacing=0 onselectstart="JavaScript: return( false );"></table>
</form>
<br><br><br><br><br>
</td>
</tr>
</table>
</body>
</html>
