刪除動態創建的錶行按鈕單擊

我試圖刪除動態創建的錶行，當用戶單擊該錶行的一部分刪除按鈕。但這似乎不適合我。我嘗試了許多不同的方法，但它仍然從第一個創建的行中刪除，或者根本不刪除。這是我目前掌握的並且不起作用。刪除動態創建的錶行按鈕單擊

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

來源

2016-06-28 Nayantara Jeyaraj

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

使用 .live綁定你的事件將自動綁定它時動態添加的行

Demo_click here

來源

2016-06-28 05:32:36

謝謝。有我的工作使用這個指導方針 –

更改刪除線，因爲你的表名是「attrtable」而不是「表」。

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

來源

2016-06-28 05:31:06

對不起'布特那。這是一個錯字。但它仍然不起作用 –

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

。

編輯

live現在已經過時，因爲1.7版本，我認爲。

現在要走的路是用on代替live。

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

查看doc。

Reference

來源

2016-06-28 05:34:02 Developer

刪除動態創建的錶行按鈕單擊

回答

相關問題