如何動態添加字體真棒圖標與Java腳本？

我有一個表，我有它設置動態地添加一個按鈕的行。我有一些問題搞清楚如何動態地添加一個字體真棒圖標到最後。如何動態添加字體真棒圖標與Java腳本？

下面是添加表格行的代碼。它根據需要添加前四個細胞，但如果您想成爲FA圖標，則需要第5個細胞。

var insertRow = document.getElementById("addRow"); 
insertRow.onclick = function() { 
var x = document.getElementById("myTable"); 
var row = x.insertRow(x.rows.length); 

    var cell = row.insertCell(0); 
    var a = document.createElement("input"); 
     a.setAttribute("type","text"); 
     a.setAttribute("class","billInfo"); 
     cell.appendChild(a); 

    var cell1 = row.insertCell(1); 
    var b = document.createElement("input"); 
     b.setAttribute("type","number"); 
     b.setAttribute("class","billAmt"); 
     b.setAttribute("onkeyup","calc(this)"); 
     cell1.appendChild(b); 

    var cell2 = row.insertCell(2); 
    var c = document.createElement("input"); 
     c.setAttribute("type","date"); 
     c.setAttribute("class","date"); 
     cell2.appendChild(c); 

    var cell3 = row.insertCell(3); 
    var d = document.createElement("input"); 
     d.setAttribute("type","text"); 
     d.setAttribute("class","commentBox"); 
     cell3.appendChild(d); 

    var cell4 = row.insertCell(4); 
    var e = document.createElement("h5"); 
    e.setAttribute("class","sourceText"); 
    e.append('<i class="fa fa-trash-o" aria-hidden="true"></i>'); 
    e.addEventListener("click", removeRow); 
    e.addEventListener("click", calc); 
    cell4.appendChild(e); 
}

正如你可以看到細胞ROW4它創建與H5元素，然後我創建一個類，然後嘗試將其追加的TD，但添加錶行的時候，它只是顯示後的括號中的代碼附加。

console view

我發現這個代碼在運行自己的，但不知道如何將它與我的代碼合併到價值。它使用onclick將class1 sourceText添加到h1元素旁邊的FA圖標。

function pronounce() { 
    $('h1.sourceText').append('<i class="fa fa-trash-o" aria-hidden="true"> 
    </i>'); 
};

如果它幫助這裏是codepen https://codepen.io/FrontN_Dev/pen/vJNvEb

來源

2017-07-28 Mark White

貌似append是在這條線的罪魁禍首e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');

使用appendChild

e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');

來源

2017-07-28 16:38:21

感謝您的回覆，但使用appendChild無法正常工作。在控制檯中搞砸之後，我終於開始工作了。 e.setAttribute（「class」，「sourceText fa fa-trash-o」）; \t $（e.sourceText）.append（''）; 將fa fa-trash-o類添加到setAttribute並將美元符號添加到下一行。 –

簡單地嘗試通過

交換 e.append('<i class="fa fa-trash-o" aria-hidden="true"></i>');

e.innerHTML = '<i class="fa fa-trash-o" aria-hidden="true"></i>';

這應該正確呈現您的圖標。您只附加一些未被解析爲HTML的文本。

來源

2017-07-28 16:38:33

這可行，但試圖刪除行時，它只會刪除圖標。我想到了它。 –

如何動態添加字體真棒圖標與Java腳本？

回答

相關問題