js操作table中tr的順序，實現上移下移一行的效果

-Advertisement-

總體思路是在table外部加個div，修改div的innerHtml實現改變tr順序的效果具體思路是獲取當前要移動tr行的rowIndex，在table中刪除掉，然後迴圈table的rows，到了目標行再直接加進去，最後把整體的html賦值給div完成效果 js代碼如下測試html代碼如下 ...

總體思路是在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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Error occurred during initialization of VM Could not reserve enough space for 2097152KB object heap

ionic build Android後的報錯問題 ionic 升級了splashscreen和statusbar的插件後，執行ionic build android會一直報打包錯誤。原因是過低的Android-platform版本不支持新的 splashscreen和statusbar插件解決 ...
CSS 簡介

需要具備的基礎知識在繼續學習之前，你需要對下麵的知識有基本的瞭解： HTML XHTML 如果你希望首先學習這些項目，請在首頁訪問相關教程。 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素樣式通常存儲在樣式表中把樣式添 ...
prompt的工作原理

瀏覽器提供了一個內置函數，可以用來獲取用戶輸入；這個函數就是。函數與你使用過的函數alert很像(它也顯示一個對話框，其中包含你指定的字元串)，但它還提供了讓用戶輸入響應的區域。這種響應將作為函數調用結果以字元串的形式返回；如果用戶取消了對話框或者沒有輸入任何響應，返回的將是null。 ...
JavaScript document和window屬性及方法詳解

[document對象] 該對象是window和frames對象的一個屬性,是顯示於視窗或框架內的一個文檔。屬性 alinkColor 活動鏈接的顏色(ALINK) anchor 一個HTMI錨點,使用<A NAME=>標記創建(該屬性本身也是一個對象) anchors array 列出文檔錨點對 ...
Angular2 報錯 ERROR Error: If ngModel is used within a form tag

今天寫textarea的雙向數據綁定報錯，錯誤如圖：錯誤代碼如下： <div class="form-group"> <textarea id="" cols="78" rows="10" [(ngModel)] ='textareaShow' placeholder="請輸入跟進用戶反饋信息"> ...
小程式功能之全屏滾動

想做一個全屏滾動的效果，於是在網上找了一個差不多的例子，但是覺得有些地方不是很好，於是改進了一下；原文：https://blog.csdn.net/W_SSNY/article/details/84298788 先上效果：代碼： wxml: wxss: js: 如有錯誤的地方歡迎指正~，共勉。 ...
【css】如何修改select的樣式

select { /*清除select預設樣式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none; border:1px solid #CCC; width:330px; hei ...
關於視窗的一些小腳本

一般視窗分為兩種情況： 1、window.open 瀏覽器樣式視窗 ⑴ 屬性：window.open('index.html', 'newpage', 'height=800, width=60, top=20, left=50, toolbar=no, menubar=no, scrollbar ...