JavaScript DOM insertBefore无法正常工作

Question

这是我的第一个问题,所以请原谅我的错误.

我试图通过JavaScript向表中添加行.新添加的行将添加到倒数第二个位置,最后一行包含创建新行的按钮.最后一行有id"submitrow",但获取该元素并将其传递给insertBefore不知何故不起作用.将lastChild作为第二个参数传递给insertBefore也表现为奇数.

在身体中,这是形式:

<form>
    <input type="hidden" name="submit_done" value="true" />
    <table id="formtable">
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </table>
</form>

这是JavaScript函数:

function addRow(){
    var new_tr  = document.createElement('tr');
    var new_td1     = document.createElement('td');
    var new_td2     = document.createElement('td');
    var new_input   = document.createElement('input');

    new_td1.innerHTML = 'Number : ';

    new_input.type = 'text';
    new_input.name = 'num[]';
    new_td2.appendChild(new_input);

    new_tr.appendChild(new_td2);
    new_tr.insertBefore(new_td1, new_td2);

    var formtable   = document.getElementById('formtable');
    var submitrow   = document.getElementById('submitrow');
    submitrow.style.backgroundColor='red'; /*Works fine, paints button row red*/
    formtable.insertBefore(new_tr, submitrow); /*fails, invalid argument*/
}

现在,问题是:

1. insertBefore在最后一行失败.请注意,insertBefore已经在new_tr对象上尝试过了,它运行正常.所以唯一的possibe无效参数可以是submitRow,shich在失败的语句之上只有一行成功地绘制成红色.

2. 如果对于失败的调用,则运行,而不是使用submitrowif formtable.lastChild.但后来不知何故,lastChild也包括上排.这意味着,如果我再说4行并在测试输入中输入1,2,3,4,5,然后如果点击"再添加一个"按钮,现在在4到5之间添加一行!

我已经尝试了很多理由,但在任何一种情况下都无法得到任何逻辑.

希望有一个解决方案,感谢大家,

Abhay Bhave,印度

Answer 1

应在"JavaScript DOM insertBefore未正确使用 "中更改标题.

这是因为,即使您没有放入DOM,浏览器也会自动创建一个<tbody>包装表行的元素.所以,它发生#formtable的不是父的#submitrow,这就是你得到错误的原因.

试试这个:

formtable.tBodies[0].insertBefore(new_tr, submitrow);

或者,更一般地说:

submitrow.parentNode.insertBefore(new_tr, submitrow);

(在支持它的浏览器中,甚至还有这个:

submitrow.insertAdjacentElement("beforeBegin", new_tr);

Internet Explorer,Chrome,Safari和Opera都支持它,Firefox不支持,但它可以轻松填充.无论如何,我不建议使用这些东西.)

并且,作为一般建议,在写下表时始终使用<tbody>标记:

<table id="formtable">
    <tbody>
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </tbody>
</table>

而且,当然,<thead>和<tfoot>当你需要他们.