js操作table中tr的顺序，实现上移下移一行的效果

总体思路是在table外部加个div，修改div的innerHtml实现改变tr顺序的效果

具体思路是

获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了目标行再直接加进去，最后把整体的html赋值给div完成效果

js代码如下

        //使行向上一行function setRowUp(obj) {if (obj.parentNode.parentNode.rowIndex != 1) {var tab = obj.parentNode.parentNode.parentNode;var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;var nowNowIndex = obj.parentNode.parentNode.rowIndex;tab.deleteRow(nowNowIndex);var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";newHtml  = ("<TR style='font-weight: bold; text-align: center;'>"   tab.rows[0].innerHTML   "</TR>");for (i = 1; i < tab.rows.length; i  ) {if (i == (nowNowIndex - 1)) {newHtml  = ("<TR>"   nowNodeInnerHtml   "</TR>");}newHtml  = ("<TR>"   tab.rows[i].innerHTML   "</TR>");}newHtml  = "</table>";document.getElementById("divContent").innerHTML = newHtml;}}//使行向下一行function setRowDown(obj) {if (obj.parentNode.parentNode.rowIndex != (document.getElementById("divContent").childNodes[0].rows.length - 1)) {var tab = obj.parentNode.parentNode.parentNode;var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;var nowNowIndex = obj.parentNode.parentNode.rowIndex;tab.deleteRow(nowNowIndex);var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";newHtml  = ("<TR style='font-weight: bold; text-align: center;'>"   tab.rows[0].innerHTML   "</TR>");for (i = 1; i < tab.rows.length; i  ) {if (i == (nowNowIndex   1)) {newHtml  = ("<TR>"   nowNodeInnerHtml   "</TR>");}newHtml  = ("<TR>"   tab.rows[i].innerHTML   "</TR>");}//向下可能到表格现有行数外 额外处理if (tab.rows.length == (nowNowIndex   1)) {newHtml  = ("<TR>"   nowNodeInnerHtml   "</TR>");}newHtml  = "</table>";document.getElementById("divContent").innerHTML = newHtml;}}

测试html代码如下

<body><div id="divContent"><table cellpadding="5" cellspacing="0"><tr style='font-weight: bold; text-align: center;'><td>工号</td><td>姓名</td></tr><tr><td>0001<input type="button" value="↑" onclick="setRowUp(this)" /><input type="button" value="↓" onclick="setRowDown(this)" /></td><td>姓名01</td></tr><tr><td>0002<input type="button" value="↑" onclick="setRowUp(this)" /><input type="button" value="↓" onclick="setRowDown(this)" /></td><td>姓名02</td></tr><tr><td>0003<input type="button" value="↑" onclick="setRowUp(this)" /><input type="button" value="↓" onclick="setRowDown(this)" /></td><td>姓名03</td></tr><tr><td>0004<input type="button" value="↑" onclick="setRowUp(this)" /><input type="button" value="↓" onclick="setRowDown(this)" /></td><td>姓名04</td></tr><tr><td>0005<input type="button" value="↑" onclick="setRowUp(this)" /><input type="button" value="↓" onclick="setRowDown(this)" /></td><td>姓名05</td></tr></table></div>
</body>

更多专业前端知识，请上【猿2048】www.mk2048.com

js操作table中tr的顺序，实现上移下移一行的效果相关推荐

html表格整体左移动,js操作table统制tr jquery 两个table左右移动
js操作table控制tr jquery 两个table左右移动一.关于动态操作select的问题: ------------------------------------------------ ...
Jquery和JS获取Table中tr标签的值以及赋值问题
Jquery和JS获取Table中tr标签的值以及赋值业务场景:根据类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...
用js操作table、tr、td 「字体样式及TD背景图片」
function messageSort() { --函数名 var message=document.getElementById("message").value; --添加 ...
js控制table中tr位置互换
 <script type="text/javascript"> function doit(f, t) { $ ...
html里table的遍历,js遍历table中的tr
js遍历table中的tr function tt(){ var table1=document.getElementById('table1'); //节点只支持getElementsByTagNa ...
table中tr使用toggle不好，选择换一张方式
好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
html ul 位置上移,JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）...
JS移动li行数据,点击上移下移 * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:50 ...
js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...

js操作table中tr的顺序，实现上移下移一行的效果

js操作table中tr的顺序，实现上移下移一行的效果相关推荐

最新文章

热门文章