Question

I have a bit of a problem. I’m trying to add,remove and edit items in an array of objects, showing its content in a html table,but without form submission. So far I’ve managed to add items ( thanks to David Calhoun ), but now I facing a new issue, since I don’t know how to get the row index (when I click the delete image) ,so that I can delete that row. Is there any way to achieve this?

here’s my code

<script>

var table = [];
function addDetail()
{
    table.push({            
        price: document.getElementById('price').value,
        description: document.getElementById('descripcion').value
    });

    showRow(table.length-1);
    resetEntries();

}
function resetEntries()
{
    document.getElementById('price').value='';
    document.getElementById('descripcion').value='';
    document.getElementById('price').focus();

}

function showRow(i)
{
    if (table.length>0){
        var tbl = document.getElementById('tabla_estilo'); 

        var newRow = tbl.insertRow(tbl.rows.length);
        var cell1 = newRow.insertCell(0);
        cell1.textAlign='center';
        cell1.innerHTML='<a href="#"><img src="images/edit.png" width="14" height="14" alt="Edit"/></a>'

        var cell2 = newRow.insertCell(1);
        cell2.textAlign='center';
        cell2.innerHTML='<a href="#" class="delete"><img src="images/delete.png" width="14" height="14" alt="Delete"/></a>'

        var cell3 = newRow.insertCell(2);
        cell3.textAlign='center';
        cell3.innerHTML=table[i].price;

        var cell4 = newRow.insertCell(3);
        cell4.textAlign='center';
        cell4.innerHTML=table[i].description;          
    }
}

And here’s how my form looks

Answer 1

From the onclick handler for the delete button, you can traverse up to its <tr> and then get that row’s rowIndex property.

So in the onclick:

var node = this.parentNode;
while( node && node.tagName !== 'TR' ) {
    node = node.parentNode;
}

var index = node.rowIndex;

So when you’re setting up your row cells, you can add a handler:

var cell2 = newRow.insertCell(1);
cell2.textAlign='center';
cell2.innerHTML='<a href="#" class="delete"><img src="images/delete.png" width="14" height="14" alt="Delete"/></a>'

cell2.firstChild.onclick = function() {
    var node = this.parentNode;
    while( node && node.tagName !== 'TR' ) {
        node = node.parentNode;
    }
    var index = node.rowIndex;
    alert('index');
    return false;
}

This creates a new function for each row. It would be better to reference a named function instead.