动态添加表格行 [英] Dynamically Adding Table Row

问题描述

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

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

我遇到的问题是我只能插入多一行，总共两个，我只是无法找出原因。我已经回到原来的 here 来查看我的编码是否相同，除了字段名称，表格名称和添加按钮的排除方面的更改外，我看不到任何区别可导致此问题。

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

 < script type =text / javascriptlanguage =javascript > 
函数addRow（）
 {
 //向行集合中添加一行并获取对新添加行的引用
 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'>; 
} 
 
 //从表格中删除指定的行
函数removeRow（src）
 {
 / * src引用输入按钮点击。 
来获取包含< tr>的引用元素，
获取父级的父级（在本例中为< tr>）
 * / 
 var oRow = src.parentElement.parentElement; 
 
 //获取行引用后，将其删除传入rowIndex 
 document.all（addimage）。deleteRow（oRow.rowIndex）; 
 
} 
< / script> 
  

表格布局

 < table id =addimagestyle =table-layout：auto> 
< tr> 
< td width =20>< input name =selecttype =radioid =select/>< / td> 
< td width =144>< input name =titletype =textid =title/>< / td> 
< td width =304>< input name =imagetype =fileid =imageonchange =addRow（）;/>< / td> 
< / tr> 
< / table> 
  

解决方案

您添加的新行没有onchange属性集，它应该是：

pre $ oCell.innerHTML =< input type ='text'name ='image'平变化= 'addRow（）;' >中;


另外，document.all（addimage）是（据我所知）不好的做法，因为它不受所有浏览器支持。为了兼容性，你还应该添加索引来插入（-1为最后一行）和新单元格的索引。该参数在Firefox和Opera中是必需的，但在Internet Explorer，Chrome和Safari中是可选的。我建议你改变你的代码，如下所示：

  function addRow（）
 {
 //向行集合添加一行，并获取对新添加行的引用
 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（）;'>; 
} 
  

I wonder whether someone could help me please,

From a tutorial I found online which I've been able to adapt, I've put together the code below, which allows the user to dynamically add additional rows into a table following the insertion of data in the row above.

The problem I'm having is that I can only insert one more row, giving a total of two and I just can't find out why. I've been back to the original here to see check that my coding is the same and except for the changes in the field name, table name and the exclusion of the 'Add' button I can't see any differences to cause this problem.

I just wondered whether someone could perhaps take a look at my code please and let me know where I'm going wrong.

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 Layout

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

解决方案

The new row that you are adding do not have the onchange property set, it should be:

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

Also, document.all("addimage") is (as far as i know) bad practice because it is not supported by all browsers. For compatibility you should also add index to insert the row in (-1 for last) and the index for the new cells. The parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari. I suggest that you change your code to something like the following:

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

这篇关于动态添加表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！