如何动态添加字体真棒图标与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,但添加表行的时候,它只是显示后的括号中的代码附加。
我发现这个代码在运行自己的,但不知道如何将它与我的代码合并到价值。它使用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
答
貌似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>');
答
简单地尝试通过
交换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的文本。
+0
这可行,但试图删除行时,它只会删除图标。我想到了它。 –
感谢您的回复,但使用appendChild无法正常工作。在控制台中搞砸之后,我终于开始工作了。 e.setAttribute(“class”,“sourceText fa fa-trash-o”); \t $(e.sourceText).append(''); 将fa fa-trash-o类添加到setAttribute并将美元符号添加到下一行。 –