Forum

Cod: Selectaţi tot

    <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>
<script>
       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 );
}
</script>

Cod: Selectaţi tot

<table id="table1" border="1">
<tr><th>ID</th><th>Col-1</th><th>Col-2</th><th>Delete</th><th>Add Rows</th></tr>
<tr>
<td class="tbl_id">1</td><td><input type="text" name="tm1[]"/></td><td><input type="text" name="nm2[]"/></td>
<td><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
</table>
<div><input type="button" value="Add Row at end" onclick="ob_adRows.addRow()"/></div>
<script>
//JS class to add/delete rows in html table - https://coursesweb.net/javascript/ 
//receives table id
function adRowsTable(id){
  var table = document.getElementById(id);
  var me = this;
  if(document.getElementById(id)){
    var row1 = table.rows[1].outerHTML;

    //adds index-id in cols with class .tbl_id
    function setIds(){
      var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
      for(var i=0; i<tbl_id.length; i++) tbl_id[i].innerHTML = i+1;
    }

    //add row after clicked row; receives clicked button in row
    me.addRow = function(btn){
      btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): table.insertAdjacentHTML('beforeend',row1);
      setIds();
    }

    //delete clicked row; receives clicked button in row
    me.delRow = function(btn){
      btn.parentNode.parentNode.outerHTML ='';
      setIds();
    }
  }
}

//create object of adRowsTable(), pass the table id
var ob_adRows = new adRowsTable('table1');
</script>