javascript - 动态添加表格行

Question

我想知道是否有人可以帮助我，

根据我在网上找到的一个我已经能够改编的教程，我将下面的代码放在一起，它允许用户在上面的行中插入数据后动态地将额外的行添加到表中。

我遇到的问题是我只能再插入一行，总共有两行，但我就是找不到原因。我已经回到原来的状态here查看我的编码是否相同，除了字段名称、表名称的更改和“添加”按钮的排除之外，我看不出有任何差异会导致此问题。

我只是想知道是否有人可以看看我的代码并让我知道哪里出错了。

Javascript

<script type="text/javascript" language="javascript">
function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("addimage").insertRow();

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='radio' name='select'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='title'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='file' name='image'>";   
}

//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("addimage").deleteRow(oRow.rowIndex);  

}
</script>

表格布局

<table id="addimage" style="table-layout:auto">
   <tr>
      <td width="20"><input name="select" type="radio" id="select"/></td>
      <td width="144"><input name="title" type="text" id="title"/></td>
      <td width="304"><input name="image" type="file" id="image" onchange="addRow();"/></td>
   </tr>
</table>

Answer 1

您要添加的新行没有设置 onchange 属性，它应该是:

oCell.innerHTML = "<input type='text' name='image' onchange='addRow();'>";   

此外，document.all("addimage") 是(据我所知)不好的做法，因为并非所有浏览器都支持它。为了兼容性，您还应该添加索引以将行插入(-​​1 为最后一个)和新单元格的索引。该参数在 Firefox 和 Opera 中是必需的，但在 Internet Explorer、Chrome 和 Safari 中是可选的。我建议您将代码更改为如下所示:

function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.getElementById("addimage").insertRow(-1);

    var oCell = newRow.insertCell(0);
    oCell.innerHTML = "<input type='radio' name='select'>";

    oCell = newRow.insertCell(1);
    oCell.innerHTML = "<input type='text' name='title'>";

    oCell = newRow.insertCell(2);
    oCell.innerHTML = "<input type='text' name='image' onchange='addRow();'>";   
}