js操作table中tr的顺序，实现上移下移一行的效果
生活随笔
收集整理的這篇文章主要介紹了
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的顺序，实现上移下移一行的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用观察者模式编写一个可被其他对象拓展复用
- 下一篇： 解决高度塌陷问题