Question

我有以下测试html：

<table width="80%" border="0" cellspacing="0" cellpadding="1" >
  <tr>
    <td class="tableBorder">
      <table id="scriptsT" name="scriptsT" width="100%" border="0" cellspacing="1" cellpadding="0">
        <tr>

          <td colspan="4" class="tableTitle">&#8250; College Foo - ScriptList:</td>
        </tr>
        <tr class="rowHeaders">
          <td width="4%">ScriptName</td>
          <td width="2%">Main Script (Radio)</td>
          <td width="2%">(Ext)</td>
          <td width="2%">Del Script</td>

        </tr>
        <tr id="foo[1]" name="foo[1]" class="rowHeaders">
          <td id="sTD" name="sTD" width="4%">Script1</td>
          <td width="2%">
            <input type="radio" name="main" id="main" value="">
          </td>
          <td id="tTD" name="tTD" width="2%">Php</td>
          <td width="2%"><input type="Button" class="textbox" name="SelScript" id="" value="DelScript" onClick="javascript: DelScript(1); return false;"></td>

        </tr>
      </table>
    </td>
  </tr>
</table>

=============================================== ======

我正在尝试删除节点，使用“DelScript函数，尝试使用ID来选择给定的TR，基于每个具有唯一ID的TR，在本例中为foo [1]等。

在我的测试DelScript中，我首先获取表格，然后尝试删除子节点（“TR”）。

//--handle/simulate the deletion of the tr in the scriptTBL for the id
function DelScript(id)
{
    var scriptTBL=document.getElementById("scriptsT");

    var a="foo["+id+"]"

    var test=document.getElementById("foo[1]");
    //scriptTBL.parentNode.removeChild(test);
    scriptTBL.removeChild(test);

    alert("foo");
    var a;

}

但是，我搞砸了，因为我无法删除节点。

我正在运行FF4，而firefox似乎在说无法找到节点（???）。

我也尝试过使用parentNode，但得到的结果相同。

感谢您的任何指示。

Answer 1

如果你只是想 “删除点击'删除'按钮所在的TR” 您不需要任何这些id属性。

<input type="Button" onclick="DelScript(this);return false;">


function DelScript(theClickedButton) {
var tr = theClickedButton.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}

Answer 2

表行不是<table>的子项，它们是其中<tbody>元素的子项。即使标记中没有<tbody>，DOM中也只有一个<tbody>。你可以从子元素本身上升DOM，或者你可以找到var tbody = document.getElementById('scriptsT').getElementsByTagName('tbody')[0];

{{1}}

Answer 3

FF可能会在您的<tbody>和<table>之间插入<tr>元素，正如HTML规范所要求的那样。您甚至不需要知道表ID。您注释掉的尝试几乎是正确的，但您需要test.parentNode而不是table.parentNode - 您想要获取行的父节点，而不是表格的：

function deleteRow(n){
    var el = document.getElementById('foo['+n+']');
    return el.parentNode.removeChild( el );
}

Answer 4

TR不是TABLE的子代。它是TBODY的子节点，它隐含地是TABLE的子节点。试试这个：

scriptTBL.children[0].removeChild(test);

此外，安装FireBug以便您可以浏览DOM树并在脚本中设置断点，以检查它们对动态呈现的HTML所做的操作。

测试RemoveNode DOM功能

4 个答案: