javascript - 单击 html 行中的删除图标时从数组中删除项目

Question

我有点问题。我正在尝试添加、删除和编辑对象数组中的项目，在 html 表中显示其内容，但没有提交表单。到目前为止，我已经设法添加项目(感谢 David Calhoun)，但现在我面临一个新问题，因为我不知道如何获取行索引(当我单击删除图像时)，以便我可以删除那一行。有什么办法可以实现吗？

这是我的代码

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

这是我的表格的样子

Answer 1

来自onclick delete 的处理程序按钮，你可以遍历到它的 <tr>然后获取该行的 rowIndex属性(property)。

所以在onclick中:

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

var index = node.rowIndex;

因此，当您设置行单元格时，您可以添加一个处理程序:

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

这为每一行创建了一个新函数。最好改为引用命名函数。