Question

当用户点击属于该表行的删除按钮时，我尝试删除动态创建的表行。但这对我来说似乎不起作用。我尝试了很多不同的方法，但它仍然要么从第一个创建的行中删除，要么根本不删除。这就是我目前掌握的并且无法正常工作。

JS功能：

var rowID=0;
var table = document.createElement('table');
table.id = "attrtable";
table.className = "attrtable";

function showAttributes()
{
    var tr = document.createElement('tr');
    tr.id=rowID;
    var attributeName = document.getElementById("attNam").value;
    var choice=document.getElementById("attrTypefromCombo");
    var attrTypeCombo = choice.options[choice.selectedIndex].text;

    showAttrDivision.appendChild(attrName);
    showAttrDivision.appendChild(attrType);
    showAttrDivision.appendChild(closeattr);

    var tdAttrName = document.createElement('td');
    var tdAttrType = document.createElement('td');
    var tdDelete   = document.createElement('td');

    var text1 = document.createTextNode(attributeName);
    var text2 = document.createTextNode(attrTypeCombo);
    var deletebtn =  document.createElement("button");
    deletebtn.type="button";
    //deletebtn.id = rowID;
    var text3= "<img src='../Images/Delete.png'>";
    deletebtn.innerHTML = text3;
    deletebtn.onclick = function() {
        deleteRow(rowID);
    };



    tdAttrName.appendChild(text1);
    tdAttrType.appendChild(text2);
    tdDelete.appendChild(deletebtn);
    tr.appendChild(tdAttrName);
    tr.appendChild(tdAttrType);
    tr.appendChild(tdDelete);
    rowID++;
    table.appendChild(tr);
    showAttrDivision.appendChild(table);
}

function deleteRow(row) 
{
    document.getElementById("attrtable").deleteRow(row);
}

Answer 1

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable');
       // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
       // get the total number of rows
    var len = x.rows.length;
       // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

       // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

       // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

       // append the new row to the table
    x.appendChild( new_row );
}

Demo_click here

Answer 2

更改删除行，因为您的表名称是“可引用”而不是“表”。

document.getElementById("attrtable").deleteRow(row);

Answer 3

 $(buttonSelector).live ('click', function ()
 {
    $(this).closest ('tr').remove ();
 }
 );

使用.live绑定您的事件会在动态添加行时自动绑定它。

修改

live现已弃用，因为我认为版本为1.7。

现在的方法是使用on代替live。

$('#tableid').on('click', buttonSelector, function(){ $(this).closest ('tr').remove (); });

请参阅doc。

Reference

删除动态创建的表行按钮单击按钮

3 个答案: