Тестирование функции RemoveNode DOM

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, основываясь на каждом TR, имеющем уникальный ID, в данном случае 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 a, но получил те же результаты.

Спасибо за любые указатели.

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

FF, вероятно, вставляет элемент <tbody> между вашими <table> и <tr>, как того требует спецификация HTML.Вам даже не нужно знать идентификатор таблицы.Попытка, которую вы прокомментировали, была почти правильной, но вам нужно test.parentNode вместо table.parentNode - вы хотите получить родительский узел строки, а не таблицу:

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

Answer 3

TR не является потомком TABLE. Это ребенок TBODY, который неявно является ребенком TABLE. Попробуйте это:

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

Кроме того, установите FireBug, чтобы вы могли просматривать дерево DOM и устанавливать точки останова в своих скриптах, чтобы проверить, что они делают с динамически отображаемым HTML.

Answer 4

Строки таблицы не являются дочерними элементами <table>, они являются дочерними элементами <tbody> элемента внутри него. Даже если в вашей разметке нет <tbody>, она есть в DOM. Вы можете перейти вверх по DOM от самого дочернего элемента или найти <tbody>

var tbody = document.getElementById('scriptsT').getElementsByTagName('tbody')[0];