为什么我不能动态地向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

问题是你不能src在<script>元素中同时拥有属性和代码(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 )更少的代码来实现相同的结果.