Modificare script add delete row in html table

[sterica]

Salutare,

Am urmatorul cod (nu imi apartine), l-am gasit pe google, as vrea sa ii aduc doua modificari.
- adaugarea unui rand nou se face intotdeauna in ultima pozitie, cum pot face ca sa pot adauga randuri noi intre randurile deja create.
- numeroarea nu se pastreaza cand se sterg randuri, cum pot modifica ca se numeroteze automat si dupa stergea aleatorie a randurilor

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>

Demo:

POI	Latitude	Longitude	Delete?	Add Rows?
1

Multumesc!

Pentru a adauga un rind nou nu la coada ai putea sa utilizezi una dintre metodele insertBefore, insertAfter unui element DOM.
Pentru a respecta numaratoarea rindurilor tabelului tre ca la fiecare modificare a tabelului (adaugare/stergere) sa "renumerotezi" rindurile care urmeaza dupa cel modificat (nu vad o solutie mai buna), deci parcurgi pe fiecare si incrementezi sau decrementezi in functie de operatia care ai efectuat-o, sau pur si simplu rescrii indicele cu cel corect (asa as face eu).

Daca ai nevoie de un exemplu poti sa analizezi acest exemplul (care este cel indicat de tine si putin adaptat):
http://codepen.io/maikttt/pen/LWVqZY

Acest exemplu are o mica problema: de fiecare data cind se creeaza un rind nou se face "clone" la primul rind, deci in cazul cind vei sterge toate rindurile apoi incerci sa adauci din nou, nu o vei mai putea face. Deaceea iti sugerez sa interzici stergerea daca ai un singur rind (rind cu date desigur, nu header, sau altceva), sau sa gasesti o alta metoda care ar rezolva aceasta situatie.

Salut
Vezi si acest script; preluat de la adresa:
https://coursesweb.net/javascript/add-de ... javascript

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>

Demo:

ID	Col-1	Col-2	Delete	Add Rows
1

multumesc mult de ajutor, este ceea ce am nevoie