dom操作--移动节点

Posted 2023-04-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dom操作--移动节点相关的知识，希望对你有一定的参考价值。

我想实现表格的移动,首先,有一个表单,它的值是递增的,每次提交,其值+1,到八了返回1,重新递增,这个递增我能实现,但是,我希望表格也根着表单值的排列而排列.表格的代码如下:
<body>
<form name="yunxin" method="post" action="" class="center">
小车号
<select name="select" id="xc" size="1">
<option value="1" selected id="chehao">1</option>
<option value="2" id="chehao">2</option>
<option value="3" id="chehao">3</option>
<option value="4" id="chehao">4</option>
<option value="5" id="chehao">5</option>
<option id="chehao" value="6">6</option>
<option id="chehao" value="7">7</option>
<option id="chehao" value="8">8</option>
</select>
</form>
<table width="50" height="50" border="1" id="xm">
<tr id="t1"><td id="n1">1</td></tr>
<tr id="t2"><td id="n2">2</td></tr>
<tr id="t3"><td id="n3">3</td></tr>
<tr id="t4"><td id="n4">4</td></tr>
<tr id="t5"><td id="n5">5</td></tr>
<tr id="t6"><td id="n6">6</td></tr>
<tr id="t7"><td id="n7">7</td></tr>
<tr id="t8"><td id="n8">8</td></tr>
</table>
</body>
比如当前表单的值为4,那么表格的排列顺序则为4,5,6,7,8,1,2,3,请问一下该如何实现?我试过先把最上面的节点<tr>添加到表格最后面,再删除第一个<tr>节点,行不通,试过先删再添,更不行.没办法,只能来求高手来帮帮忙了~!
不行,我的table里的内容是随时更改的,一楼的思路行不通,要是能用的话,我就用数组了~有没有办法做到?最好是可行的,难得有些问题要问,如果可行的话,另加分~最好是给可行的代码~!

参考技术A 　　为什么非得移动一行呢？如果你只是想切换tr内的td的innerhtml的话，做起来应该是很简单的，
　　如果你真要移动行的话，你可以搜索下“table拖拽”关键字。有很多相关的代码。
　　再给你个这种思路吧：
　　<html>
　　<head>
　　<script>
　　function table_tb(th)
　　
　　var str_tb='<table width="50" height="50" border="1" id="xm">';
　　var str_tr1='<tr id="t1"><td id="n1">1</td></tr>';
　　var str_tr2='<tr id="t2"><td id="n2">2</td></tr>';
　　var str_tr3='<tr id="t3"><td id="n3">3</td></tr>';
　　var str_tr4='<tr id="t4"><td id="n4">4</td></tr>';
　　var str_tr5='<tr id="t5"><td id="n5">5</td></tr>';
　　var str_tr6='<tr id="t6"><td id="n6">6</td></tr>';
　　var str_tb2='</table>';
　　var tb=str_tb+str_tr1+str_tr2+str_tr3+str_tr4+str_tr5+str_tr6+str_tb2;

　　switch(th)
　　
　　case '1':
　　break;
　　case '2': tb=str_tb+str_tr2+str_tr3+str_tr4+str_tr5+str_tr6+str_tr1+str_tb2;

　　break;
　　case '3': tb=str_tb+str_tr3+str_tr4+str_tr5+str_tr6+str_tr1+str_tr2+str_tb2;
　　break;
　　case '4': tb=str_tb+str_tr4+str_tr5+str_tr6+str_tr1+str_tr2+str_tr3+str_tb2;
　　break;
　　case '5': tb=str_tb+str_tr5+str_tr6+str_tr1+str_tr2+str_tr3+str_tr4+str_tb2;
　　break;
　　case '6': tb=str_tb+str_tr6+str_tr1+str_tr2+str_tr3+str_tr4+str_tr5+str_tb2;
　　break;
　　default :
　　break;
　　

　　window.test.innerHTML=tb;

　　
　　</script>
　　</head>
　　<body>
　　<form name="yunxin" method="post" action="" class="center">
　　小车号
　　<select name="select" id="xc" size="1" onchange="table_tb(this.value);">
　　<option value="1" selected id="chehao">1</option>
　　<option value="2" id="chehao">2</option>
　　<option value="3" id="chehao">3</option>
　　<option value="4" id="chehao">4</option>
　　<option value="5" id="chehao">5</option>
　　<option id="chehao" value="6">6</option>

　　</select>
　　</form>
　　<div id='test'>
　　<table width="50" height="50" border="1" id="xm">
　　<tr id="t1"><td id="n1">1</td></tr>
　　<tr id="t2"><td id="n2">2</td></tr>
　　<tr id="t3"><td id="n3">3</td></tr>
　　<tr id="t4"><td id="n4">4</td></tr>
　　<tr id="t5"><td id="n5">5</td></tr>
　　<tr id="t6"><td id="n6">6</td></tr>

　　</table></div>
　　</body>
　　</html>
　　动态的也一样行啊。。。只要在函数里动态得到内容不就得了，document.getElementById('n1').innerhtml
　　如果还不满意，那你找‘table拖拽’代码吧。本回答被提问者采纳