使用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遍历表的问题

回答

相关问题