您可以克隆具有输入的第一行，然后获取嵌套输入并更新其ID以添加行数字（并且对第一个单元格做同样的处理）。

 函数deleteRow（row）
 {
 var i = row.parentNode.parentNode.rowIndex; 
 document.getElementById（'POITable'）。deleteRow（i）; 



函数insRow（）
 {
 var x = document.getElementById（'POITable'）; 
 //深层克隆目标行
 var new_row = x.rows [1] .cloneNode（true）; 
 //获取行总数
 var len = x.rows.length; 
 //设置第一行的innerHTML 
 new_row.cells [0] .innerHTML = len; 

 //从第一个单元格获取输入并更新其ID和值
 var inp1 = new_row.cells [1] .getElementsByTagName（'input'）[0]; 
 inp1.id + = len; 
 inp1.value =''; 

 //从第一个单元格获取输入并更新其ID和值
 var inp2 = new_row.cells [2] .getElementsByTagName（'input'）[0]; 
 inp2.id + = len; 
 inp2.value =''; 

 //将新行追加到表
 x.appendChild（new_row）; 

 

以下演示

I'm trying to add/delete table rows following this example and this example.

Here's my code:

HTML Form

<div id="POItablediv">
    <input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
    <table id="POITable" border="1">
        <tr>
            <td>POI</td>
            <td>Latitude</td>
            <td>Longitude</td>
            <td>Delete?</td>
            <td>Add Rows?</td>
        </tr>
        <tr>
            <td>1</td>
            <td><input size=25 type="text" id="latbox" readonly=true/></td>
            <td><input size=25 type="text" id="lngbox" readonly=true/></td>
            <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
            <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
        </tr>
    </table>
</div>

JavaScript

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable').insertRow(1);
    var c1=x.insertCell(0);
    var c2=x.insertCell(1);
    c1.innerHTML="NEW CELL1";
    c2.innerHTML="NEW CELL2";
}

Now, as you can see, In my table I have text fields and buttons. What I want:

1. Just to repeat the structure of the row. I can't do it right now since innerHTM just takes texts. How can I insert a textfield or label?

2. The ids of the textfields should also be different since I'll retrieve the values later to put it in a database.

3. I want to put a function to increment the number of POIs as well

Can anyone help me out please?

You could just clone the first row that has the inputs, then get the nested inputs and update their ID to add the row number (and do the same with the first cell).

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable');
       // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
       // get the total number of rows
    var len = x.rows.length;
       // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

       // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

       // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

       // append the new row to the table
    x.appendChild( new_row );
}

Demo below

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('POITable').deleteRow(i);
}


function insRow() {
  console.log('hi');
  var x = document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  x.appendChild(new_row);
}

<div id="POItablediv">
  <input type="button" id="addPOIbutton" value="Add POIs" /><br/><br/>
  <table id="POITable" border="1">
    <tr>
      <td>POI</td>
      <td>Latitude</td>
      <td>Longitude</td>
      <td>Delete?</td>
      <td>Add Rows?</td>
    </tr>
    <tr>
      <td>1</td>
      <td><input size=25 type="text" id="latbox" /></td>
      <td><input size=25 type="text" id="lngbox" readonly=true/></td>
      <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
      <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()" /></td>
    </tr>
  </table>