Add/Delete table rows dynamically using JavaScript

Question

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?

Answer 1

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>

Answer 2

Easy Javascript Add more Rows with delete functionality

Cheers !

<TABLE id="dataTable">
<tr><td>
               <INPUT TYPE=submit name=submit id=button class=btn_medium VALUE=\'Save\'  >
               <INPUT type="button" value="AddMore" onclick="addRow(\'dataTable\')" class="btn_medium"    /> 
</td></tr>

<TR>
<TD> 
                <input type="text" size="20" name="values[]"/> <br><small><font color="gray">Enter Title</font></small> 
</TD>
</TR>
</table>



<script>


function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell3 = row.insertCell(0);
       cell3.innerHTML = cell3.innerHTML +' <input type="text" size="20" name="values[]"/> <INPUT type="button"  class="btn_medium" value="Remove" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" /><br><small><font color="gray">Enter Title</font></small>';
  //cell3.innerHTML = cell3.innerHTML +' <input type="text" size="20" name="values[]"/> <INPUT type="button"  class="btn_medium" value="Remove" onclick="this.parentNode.parentNode.innerHTML=\'\';" /><br><small><font color="gray">Enter Title</font></small>';       
}

</script>