Javascript 动态添加表行

我不知道是否有人能帮我

从我在网上找到的一个教程中，我已经修改过了，我把下面的代码放在了一起，它允许用户在上面的行中插入数据之后，动态地向表中添加额外的行

我遇到的问题是，我只能再插入一行，总共两行，我就是不知道为什么。我已经回到原始版本，检查我的编码是否相同，除了字段名、表名的更改和“添加”按钮的排除外，我看不到导致此问题的任何差异

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

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>

函数addRow（）
{
//向rows集合添加一行，并获取对新添加行的引用
var newRow=document.all（“addimage”）.insertRow（）；
var oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
}
//从表中删除指定的行
函数删除程序（src）
{
/*src是指单击的输入按钮。
要获取对包含元素的引用，
获取父对象的父对象（在本例中）
*/   
var oRow=src.parentElement.parentElement；
//获得行引用后，通过其行索引将其删除
document.all（“addimage”）.deleteRow（oRow.rowIndex）；
}

表格布局

<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>

---

要添加的新行未设置onchange属性，它应该是：

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

oCell.innerHTML=“”；

另外，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();'>";   
}

函数addRow（）
{
//向rows集合添加一行，并获取对新添加行的引用
var newRow=document.getElementById（“addimage”）.insertRow（-1）；
var oCell=newRow.insertCell（0）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（1）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（2）；
oCell.innerHTML=“”；
}

看到了实际的代码。其中有一个按钮，当单击时，会将行添加到表中。在本例中，您使用的是

onchange

事件。而不是像我在评论中提到的那样，使用

onclick

事件

其次，如果您在每个图像上添加

onclick

，您将在任何图像上添加额外的行。我希望你没事

建议

不要在图像上使用

onclick

，而是使用包含图像的

anchor

标记，或者使用演示中显示的单个按钮。它看起来像这样

<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">
      <a href='#' onclick='addRow();'>
        <input name="image" type="file" id="image"/>
      </a>
   </td>
 </tr>
</table>

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 = "<a href='#' onclick='addRow();><input type='file' name='image'>'</a>";   
}

函数addRow（）
{
//向rows集合添加一行，并获取对新添加行的引用
var newRow=document.all（“addimage”）.insertRow（）；
var oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
}

如果要在添加行后禁用锚定标记，可以使用javascript禁用它。

---

希望这能奏效。

尝试使用

onclick

而不是

onchange

。如果可能的话，把你的完整代码贴在上面，看看这个：它还包含一个现场演示。嗨，太棒了，非常感谢。我知道这与我原来的帖子有点偏差，但我会使用索引号作为删除行的方式吗？好心的regardsHi，这太棒了，非常感谢你花时间回复我的帖子和你的帮助。问候