Question

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

从我在网上发现的我能够适应的教程中，我将下面的代码放在一起，这允许用户在上面的行中插入数据后动态地将其他行添加到表中。 / p>

我遇到的问题是我只能插入一行，总共有两行而我无法找到原因。我已经回到原来的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();'>";   
}

Answer 2

看到实际的代码。在那里有一个按钮，当点击时，向表添加行。在您的情况下，您正在使用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>";   
}

如果要在添加行后禁用锚标记，可以使用javascript将其禁用。希望这有效。

动态添加表行

2 个答案: