如何动态添加字体真棒图标与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脚本？

回答

相关问题