为什么我不能动态地向HTML表添加行？

Question

到目前为止，我已经阅读了很多文章，并尝试了很多不同的方法来动态地向我的HTML表添加行，但没有任何工作。 当我单击添加按钮[+]时，它不会添加一行。 由于某些原因，当我这样做时，看起来它不会让我添加单元格： newCell = newRow.insertCell() 。 我的newRow变量找不到insertCell()方法。

这是我的表：

<table ID="newDataTable" runat="server" width="400">
<tr runat="server"> 
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "50">
        <label style="font-size:smaller"> CITY: </label>
    </td>
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "80">
        <input id= "City_box" type="text" name="tb_CITY"/>
    </td>
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "75">
        <label style="font-size:smaller"> &nbsp;&nbsp;&nbsp;STATE: </label>
    </td>
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "90">
        <input id= "State_box" type="text" name="tb_STATE"/>
    </td>
    <td runat="server" align="left" bordercolor="#FFFFFF" width= "10">
        <input title="Add Row" id="addButton" type="button" value=" + " onclick="addRow()" />
    </td> 
    <td runat="server" align="left" bordercolor="#FFFFFF" width= "10">
        <input title="Remove Row" id="deleteButton" type="button" value=" - " onclick="removeRow(this)" />
    </td> 
</tr>
</table>

这是我正在使用的Javascript ：

<script type="text/javascript">
//add a new row to the table
function addRow() 
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.getElementById('newDataTable').insertRow(-1);

    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var newCell = newRow.insertCell();
    newCell.innerHTML = "<label style='font-size:smaller'> CITY: </label>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input type='text' name='tb_CITY'/>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<label style='font-size:smaller'> &nbsp;&nbsp;&nbsp;STATE: </label>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input type='text' name='tb_STATE'/>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input title='Add Row' name='addButton' type='button' value=' + ' onclick='addRow()' />";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input title='Remove Row' name='deleteButton' type='button' value=' - ' onclick='removeRow(this)' />";
}

//deletes the specified row from the table
function removeRow(src) 
{
    /* src refers to the input button that was clicked. 
    to get a reference to the containing <tr> element,
    get the parent of the parent (in this case <tr>)
    */
    var oRow = src.parentElement.parentElement;

    //once the row reference is obtained; delete it passing in its rowIndex
    document.all("newDataTable").deleteRow(oRow.rowIndex);
}    
</script>

Answer 1

问题是你不能在<script>元素中同时拥有src属性和代码（OP在问题中对此进行了编辑，因此这指的是之前的代码无效）。

更改：

<script type="text/javascript" src="script/FloatLayer.js">

至：

<script type="text/javascript">

或者，将addRow()和removeRow()到FloatLayer.js 。 这是一个演示，其中至少添加按钮正在工作，没有代码更改。

演示： http ： //jsfiddle.net/ThinkingStiff/9aDpf/

我将insertCell()更改为insertCell( -1 )以按正确顺序放置元素，这可能是您想要的。

此外，正如Jonathan M所提到的，为了让它在所有浏览器中运行，请更改：

insertRow()

至：

insertRow( -1 )

最后一点说明：您可以使用tr.cloneNode( true )以更少的代码实现相同的结果。

Answer 2

如果你使用IE，Chrome或Safari之外的任何东西， insertRow()需要一个参数。 即使有这三个，非parm行为也不一致。 使用insertRow(-1)将其放在最后。