ADD/DELETE Filas

numeradas

by Raúl Rojas

HTML

<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="POItablediv">
   <br/><br/>
    <input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()"/>
    <br/><br/>
    <table id="POITable" border="1">
        <tr>
            <th>#</th>
            <th>NOMBRE</th>
            <th>PUESTO</th>
            <th>CURP</th>
            <th>EMAIL</th>
        </tr>
        <tr>
            <td>1</td>
            <td><input size=15 type="text" id="latbox"/></td>
            <td><input size=15 type="text" id="latbox"/></td>
            <td><input size=15 type="text" id="latbox"/></td>
            <td><input size=15 type="text" id="lngbox" readonly=true /></td>
            <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
        </tr>
    </table>

CSS

th{
    padding:10px;
    text-align:center;
}

JavaScript

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