使用DOM遍歷表的問題

我設法解決了一些使用JavaScript僅使用JavaScript遍歷錶行的問題，但遇到了2個障礙。我正在嘗試創建一個表格，其中每行都有一組按鈕來移動該特定行，然後將其移除或刪除。我能夠成功地使用.replaceChild方法，但它取代了行而不是僅僅交換它們。當我嘗試.moveRow時，我不斷收到一個錯誤，說HTML表格部分沒有這個方法。嘗試將當前行與下面的行交換時遇到同樣的問題。有什麼建議麼？使用DOM遍歷表的問題

function up(x){ 

     // var tableBody = document.getElementsByTagName("tbody")[0]; // tried it with tableBody and it still didn't work 
     var table = x.parentNode.parentNode.parentNode; 
     var tableRow = x.parentNode.parentNode.cloneNode(true); 
     var previousRow = x.parentNode.parentNode.previousSibling.cloneNode(true); 
     table.replaceChild(tableRow,x.parentNode.parentNode.previousSibling); 

    } 

    function down(x){ 
     var table = x.parentNode.parentNode.parentNode; 
     var tableRow = x.parentNote.parentNode.cloneNode(true); 
     var belowRow = x.parentNode.parentNode.nextSibling.cloneNode(true); 
     table.moveRow(tableRow,x.parentNode.parentNode.nextSibling); 
    }

我的按鈕：

<table id="table1" border="1"> 
     <tbody> 
      <tr> 
       <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> 
      </tr> 
      <tr id="enterData"> 
       <td id="buttons"> 
        <input type="button" value="Up" onclick="up(this)" /> 
        <input type="button" value="Down" onclick="down(this)" /> 
       </td> 
      </tr> 
     </tbody> 
     </table>

來源

2013-02-15 Cucko Oooo

你嘗試['insertBefore'（https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore）？你爲什麼要克隆行，你不想只用這些函數移動它們嗎？ – bfavaretto 2013-02-15 00:23:56

讓我們看看這個鏈接http://help.dottoro.com/ljuikjpk.php，moveRow似乎不是跨瀏覽器。順便說一句，嘗試'幹'你的代碼，避免每次調用，x.parentNode.parentNode。它會更清晰地爲你 – Newben 2013-02-15 00:42:26

@bfavaretto：我沒有嘗試insertBefore，雖然現在我看它，我認爲它會解決我的問題。我克隆了行，因爲我想複製該行的值，並且不確定這樣做是否會起作用。 – 2013-02-15 02:09:06

您可以使用insertBefore到向上或向下移動行和appendChild的最後一排，我也使用* ElementSibling避免文本節點問題，但可能會導致compatibily的問題。

function up(x){ 
    var row = x.parentNode.parentNode; 
    var table = row.parentNode; 
    //Don't move up over the header 
    if (row.previousElementSibling && row.previousElementSibling.previousElementSibling){ 
     table.insertBefore(row,row.previousElementSibling); 
    } 
} 
function down(x){ 
    var row = x.parentNode.parentNode; 
    var table = row.parentNode; 
    //can't use insertBefore for last row. 
    if (row.nextElementSibling && row.nextElementSibling.nextElementSibling){ 
     table.insertBefore(row,row.nextElementSibling.nextElementSibling); 
    } 
    else{ 
     table.appendChild(row); 
    } 
}

DEMO

來源

2013-02-15 01:10:19 Musa

非常感謝！ .nextSiblingElement是否是打字錯誤，意思是.nextElementSibling或者它是不同的方法？ – 2013-02-15 02:21:46

@CuckoOooo這是一個錯字，感謝您指出 – Musa 2013-02-15 02:39:39

使用DOM遍歷表的問題

回答

相關問題