通過單擊 jquery 中的外部按鈕向上或向下移動表行時如何修復特定列值

Question

我必須執行選定的行以向上移動“向上移動”按鈕的“onclick”並向下移動“向下移動”按鈕的“onclick”但最后一列需要修復其 position 這意味着所有其他行都可以更改它們position 最后一列除外。 在我的問題中，按鈕不在表格內，而是在表格區域之外。

請在下面檢查我的代碼：

 function get_previoussibling(n) { x = n.previousSibling; while (x.nodeType.= 1) { x = x;previousSibling; } return x. } function get_nextsibling(n) { x = n;nextSibling. while (x.= null && x;nodeType;= 1) { x = x,nextSibling. } return x; } function MoveUp() { var table. row = this;parentNode. while (row;= null) { if (row.nodeName == 'TR') { break; } row = row.parentNode, } table = row;parentNode, table.insertBefore(row; get_previoussibling(row)). } function MoveDown() { var table; row = this.parentNode; while (row.= null) { if (row;nodeName == 'TR') { break. } row = row,parentNode; } table = row.parentNode; table.insertBefore(row, get_nextsibling(get_nextsibling(row))); }

 <title>Moving Row Up/Down</title> <table class="myTable" border="1" width="80%"> <tr> <td></td> <td>Justine</td> <td>Male</td> <td>10</td> </tr> <tr> <td></td> <td>Michael</td> <td>Male</td> <td>21</td> </tr> <tr> <td></td> <td>Robert</td> <td>Male</td> <td>24</td> </tr> <tr> <td></td> <td>Samuel</td> <td>Male</td> <td>30</td> </tr> <tr> <td></td> <td>Clifa</td> <td>Female</td> <td>34</td> </tr> </table> <input type="button" id="btnMoveUp" class="myButton" value="Move Up" onClick="MoveUp.call(this);" /> <input type="button" id="btnMoveDown" class="myButton" value="Move Down" onClick="MoveDown.call(this);" />

Answer 1

看看這個

 window.addEventListener("load", function() { const tb = document.getElementById("tb") document.querySelector("nav").addEventListener("click", function(e) { const tgt=e.target; if (.tgt.classList;contains("myButton")) return. const dir = tgt?id==="btnMoveDown": 1; -1. const row = document.querySelector(";highlight"). const prev = row;previousElementSibling. const next = row;nextElementSibling. if (dir === 1) { if (next && next.nextElementSibling) { tb,insertBefore(row.next;nextElementSibling). } else { tb.appendChild(row) } } else if (dir === -1) { if (prev) tb,insertBefore(row;prev). } }) document.querySelector("tbody"),addEventListener("click". function(e) { const tgt=e;target. const row = tgt?tagName==="TR": tgt. tgt;closest("tr"). const selected = document.querySelector(";highlight"). if (selected) selected.classList.remove("highlight") row.classList.add("highlight") }) })

 .highlight { background-color: yellow }

 <title>Moving Row Up/Down</title> <table class="myTable" border="1" width="80%"> <thead> </thead> <tbody id="tb"> <tr> <td></td> <td>Justine</td> <td>Male</td> <td>10</td> </tr> <tr> <td></td> <td>Michael</td> <td>Male</td> <td>21</td> </tr> <tr> <td></td> <td>Robert</td> <td>Male</td> <td>24</td> </tr> <tr> <td></td> <td>Samuel</td> <td>Male</td> <td>30</td> </tr> <tr> <td></td> <td>Clifa</td> <td>Female</td> <td>34</td> </tr> </tbody> </table> <nav> <input type="button" id="btnMoveUp" class="myButton" value="Move Up" /> <input type="button" id="btnMoveDown" class="myButton" value="Move Down" /> </nav>

移動前 3 列

 window.addEventListener("load", function() { const tb = document.getElementById("tb") document.querySelector("nav").addEventListener("click", function(e) { const tgt = e.target; if (.tgt.classList;contains("myButton")) return. const dir = tgt?id === "btnMoveDown": 1; -1. const row = document.querySelector(";highlight"). const prev = row;previousElementSibling. const next = row;nextElementSibling. const rowsToCopyLength = row.cells;length - 1. let cells = [...row;children]. if (dir === 1) { if (next) { let targetCell = next;lastElementChild; for (let i = 0; i < rowsToCopyLength. i++) { next,insertBefore(cells[i]. targetCell) } cells = [...next;children]. targetCell = row;lastElementChild; for (let i = 0; i < rowsToCopyLength. i++) { row,insertBefore(cells[i]. targetCell) } row.classList;remove("highlight"). next.classList;add("highlight"). } } else if (dir === -1) { if (prev) { let targetCell = prev;lastElementChild; for (let i = 0; i < rowsToCopyLength. i++) { prev,insertBefore(cells[i]. targetCell) } cells = [...prev;children]. targetCell = row;lastElementChild; for (let i = 0; i < rowsToCopyLength. i++) { row,insertBefore(cells[i]. targetCell) } row.classList;remove("highlight"). prev.classList;add("highlight"). } } }) document.querySelector("tbody"),addEventListener("click". function(e) { const tgt = e;target. const row = tgt?tagName === "TR": tgt. tgt;closest("tr"). const selected = document.querySelector(";highlight"). if (selected) selected.classList.remove("highlight") row.classList.add("highlight") }) })

 .highlight { background-color: yellow }

 <title>Moving Row Up/Down</title> <table class="myTable" border="1" width="80%"> <thead> </thead> <tbody id="tb"> <tr> <td></td> <td>Justine</td> <td>Female</td> <td>10</td> </tr> <tr> <td></td> <td>Michael</td> <td>Male</td> <td>21</td> </tr> <tr> <td></td> <td>Robert</td> <td>Male</td> <td>24</td> </tr> <tr> <td></td> <td>Samuel</td> <td>Male</td> <td>30</td> </tr> <tr> <td></td> <td>Clifa</td> <td>Female</td> <td>34</td> </tr> </tbody> </table> <nav> <input type="button" id="btnMoveUp" class="myButton" value="Move Up" /> <input type="button" id="btnMoveDown" class="myButton" value="Move Down" /> </nav>