单击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属性。

所以在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;
}

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

Answer 2

使用JQuery使用任何这些选择器

$('table tr').each(function(i, v) { alert((i+1) + ' row') });

$('table tr:nth-child(i)').hide(); 

OR

 <a href="#" class="delete" onclick="$(this).parent().parent().hide()">

Answer 3

在表中创建新行时，使用自定义属性将元素的索引存储在数组中：

<tr position='0'><td></td><td></t></tr>
<tr position='1'><td></td><td></t></tr>
<tr position='2'><td></td><td></t></tr>
<tr position='3'><td></td><td></t></tr>

或者，如果您的行总是与数组中的元素的顺序相同，则可以检查此行之前有多少个兄弟姐妹。

我会使用第一种方法，因为如果重新排序表中的行，它仍然可以工作。

确保如果删除该行，则重新计算行位置属性。