交換表的行只對第二次

Question

這裏有一個簡單的HTML <table> 2行，有聯繫的每一行移動的行向上/向下：

<table border=1> 
 
    <tr> 
 
     <td>Row A</td> 
 
     <td> 
 
      <a href="javascript:void(0)" onclick="up(this)">Up</a> 
 
      <a href="javascript:void(0)" onclick="down(this)">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row B</td> 
 
     <td> 
 
      <a href="javascript:void(0)" onclick="up(this)">Up</a> 
 
      <a href="javascript:void(0)" onclick="down(this)">Down</a> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<script> 
 
    function up(link) { 
 
     var row = link.parentNode.parentNode; 
 
     var prevRow = row.previousSibling; 
 
     if (prevRow != null) { 
 
      row.parentNode.insertBefore(row, prevRow); 
 
     } 
 
    } 
 
    function down(link) { 
 
     var row = link.parentNode.parentNode; 
 
     var nextRow = row.nextSibling; 
 
     if (nextRow != null) { 
 
      row.parentNode.insertBefore(nextRow, row); 
 
     } 
 
    } 
 
</script>

爲什麼是它點擊第一行的Down鏈接，一開始什麼都不做（沒有錯誤），但是可以用於第二次點擊？同樣點擊第二排的Up鏈接最初什麼都不做，但之後開始工作？此外，如果我點擊一個不能執行的鏈接（例如，第一行的Up或最後一行的Down），那麼應該工作的同一行的另一個鏈接（第一行的Down）不會對隨後的點擊不起作用，但如果再次點擊則工作？

我應該做什麼/更改，以便鏈接在第一次點擊時能夠正常工作？

Answer 1

由於空白也是節點previousSibling/nextSibling返回#text第一次調用您的任何函數後，它自行修復。因此，爲了得到它的工作在第一時間改變previousElementSibling/nextElementSibling

<table border=1> 
 
    <tr> 
 
     <td>Row A</td> 
 
     <td> 
 
      <a href="javascript:void(0)" onclick="up(this)">Up</a> 
 
      <a href="javascript:void(0)" onclick="down(this)">Down</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row B</td> 
 
     <td> 
 
      <a href="javascript:void(0)" onclick="up(this)">Up</a> 
 
      <a href="javascript:void(0)" onclick="down(this)">Down</a> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<script> 
 
    function up(link) { 
 
     var r = link.parentNode.parentNode; 
 
     var rp = r.previousElementSibling; 
 
     if (rp != null) { 
 
      r.parentNode.insertBefore(r, rp); 
 
     } 
 
    } 
 
    function down(link) { 
 
     var r = link.parentNode.parentNode; 
 
     var rn = r.nextElementSibling; 
 
     if (rn != null) { 
 
      r.parentNode.insertBefore(rn, r); 
 
     } 
 
    } 
 
</script>