如何交换DOM元素位置？

EdwardLong 2011-06-03 09:26:56

<table>
<tr><td>A</td><td>name</td><td>detail</td></tr>
<tr><td>B</td><td>name</td><td>detail</td></tr>
</table>

如题，用JS 如何把 A行移动到 B行的下方？

...全文

453 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

henrycomein 2011-06-03

打赏
举报

还有一个条件没做判断

起始行>0&&结束行>0&&插入行>0&&起始行<结束行&&结束行<=整个table的行数

插入行 <起始行|| (插入行>结束行 &&插入行<整个table的行数)

henrycomein 2011-06-03

打赏
举报

晕刚才昨晚测试忘记把字改回来了那个button改一下

<input type="button" value="将第二至第3行移动到第六行前" onclick="moveRows('tb',2,3,6,0)"/>

henrycomein 2011-06-03

打赏
举报





<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

		//beginRow:要移动的起始行位置 ，如:要从第一行开始移动，则为1  

		//endRow,要移动的起始行位置

		//nsertRow,插入行的位置

		//type:0为在nsertRow之前插入，1为在nsertRow之后插入

		function moveRows(tableid,beginRow,endRow,insertRow,type){

			var oTable=document.getElementById(tableid);

			//存放行的数组

			var aTrs=[];

			

			if(oTable){

				//存放插入行的引用

				var iRow=oTable.tBodies[0].rows[insertRow-1];

				for(var i=beginRow-1;i<endRow;i++){

					aTrs.push(oTable.tBodies[0].rows[i])

				}

				//创建文档碎片

				var oFragment=document.createDocumentFragment();

				for(var j=0;j<aTrs.length;j++){

					oFragment.appendChild(aTrs[j])

				}

				if(type==0)

					oTable.tBodies[0].insertBefore(oFragment,iRow);

				else

					oTable.tBodies[0].insertBefore(oFragment,iRow.nextSibling);

			}

			else{

				alert('id错误');

			}

		}

	</script>

</head>

<body>

	<table id="tb">

		<tr><td>A</td><td>name</td><td>detail</td></tr>

		<tr><td>B</td><td>name</td><td>detail</td></tr>

		<tr><td>C</td><td>name</td><td>detail</td></tr>

		<tr><td>D</td><td>name</td><td>detail</td></tr>

		<tr><td>E</td><td>name</td><td>detail</td></tr>

		<tr><td>F</td><td>name</td><td>detail</td></tr>

    </table>

	<input type="button"  value="将第二至第四行移动到第六行前" onclick="moveRows('tb',2,3,6,1)"/>

</body>



</html>

flyxiao1987 2011-06-03

打赏
举报

<html>

	<head>

		<script type="text/javascript">

			var currentNum = 1;

			function up() {

				if (currentNum > 0) {

					var tb = document.getElementById("tb");

					var currentRow = tb.rows[currentNum];

					var tr = tb.insertRow(--currentNum);

					var len = currentRow.cells.length;

					for (var i = 0; i < len; i++) {

						tr.appendChild(currentRow.cells[0]);

					}

					tb.tBodies[0].removeChild(currentRow);

					tr.style.backgroundColor = "blue";

					tr.style.color = "white";

				}

			}

			function down() {

				var tb = document.getElementById("tb");

				var rowLength = tb.rows.length;

				if (currentNum < rowLength - 1) {

					var currentRow = tb.rows[currentNum];

					var tr = tb.insertRow(currentNum + 2);

					var len = currentRow.cells.length;

					for (var i = 0; i < len; i++) {

						tr.appendChild(currentRow.cells[0]);

					}

					tb.tBodies[0].removeChild(currentRow);

					tr.style.backgroundColor = "blue";

					tr.style.color = "white";

					currentNum++;

				}

			}

		</script>

	</head>

	<body>

		<table id="tb">

		  <tr><td>A</td><td>name</td><td>detail</td></tr>

		  <tr style="background-color:blue; color: white;"><td>B</td><td>name</td><td>detail</td></tr>

		  <tr><td>C</td><td>name</td><td>detail</td></tr>

		  <tr><td>D</td><td>name</td><td>detail</td></tr>

		  <tr><td>E</td><td>name</td><td>detail</td></tr>

		</table>

		<button onclick="up()"> Up </button>

		<button onclick="down()">Down</button>

	</body>

</html>

EdwardLong 2011-06-03

打赏
举报

先谢谢三楼
但该方法只是把移动行追加到表的最后。
不符合我的需求。

我要做的是，把1或N行，移动到指定的位置，并非都追加到表的最后

汉尼拔 2011-06-03

打赏
举报

[Quote=引用 3 楼 flyxiao1987 的回复:]

HTML code
<html>
<head>
<script type="text/javascript">
function exchange() {
var tb = document.getElementById("tb");
var tr = tb.rows[0];
……
[/Quote]
++
这样就可以了,既然是移动,不用create

flyxiao1987 2011-06-03

打赏
举报

<html>

	<head>

		<script type="text/javascript">

			function exchange() {

				var tb = document.getElementById("tb");

				var tr = tb.rows[0];

				tb.tBodies[0].appendChild(tr);

			}

		</script>

	</head>

	<body>

		<table id="tb">

		  <tr><td>A</td><td>name</td><td>detail</td></tr>

		  <tr><td>B</td><td>name</td><td>detail</td></tr>

		</table>

		<button onclick="exchange()">Exchange</button>

	</body>

</html>

EdwardLong 2011-06-03

打赏
举报

问题补充下：
如果只移动一行，还好处理，但是如果要移动多行的话就比较麻烦。
例如
<table>
<tr><td>A</td><td>name</td><td>detail</td></tr>
<tr><td>A.1</td><td>name</td><td>detail</td></tr>
<tr><td>A.2</td><td>name</td><td>detail</td></tr>

<tr><td>B</td><td>name</td><td>detail</td></tr>
<tr><td>B.1</td><td>name</td><td>detail</td></tr>
<tr><td>B.2</td><td>name</td><td>detail</td></tr>

<tr><td>C</td><td>name</td><td>detail</td></tr>
<tr><td>C.1</td><td>name</td><td>detail</td></tr>
<tr><td>C.2</td><td>name</td><td>detail</td></tr>
</table>

如果是互换 A类行和 B类行这种多行移动又如何处理？