如何在动态创建的按钮中添加字体真棒图标 [英] How to add a font awesome icon in dynamically created button

问题描述

在我的HTML页面中，特定列的每一行都有一个按钮.用户可以在运行时添加新行，并且这些按钮也会与每行中的其余字段一起插入.

In my HTML page I have a button in each row in a particular column. User may add new rows at runtime and these buttons are also inserted alongwith rest of the fields in each row.

使用以下按钮添加按钮:

The buttons are being appended using the following:

function funcAddBtnOpenPad() {   // This funct being called at page onload
// VARS FOR ADDING BUTTON IN CELL "5"
// STORING BUTTON ATTRIBUTES
var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad', name:'btnOpenPad', value:'OpenPad' });

$('#childTable tr').each(function(tempRowIdx) {
    
// CONSTRUCT TAG FOR BUTTON "OpenPad" IN CELL "5"
    tempButtonCellTag = 'id_tIndx'+tempRowIdx+5;

// HERE WE ARE INSERTING THE BUTTON "OpenPad" <<<<
        $('#'+ tempButtonCellTag).append(btnOpenPad);
});
}

现在要在按钮中插入图标，我将引用添加到按钮类的 fa图标中，如下所示:

Now to insert an icon in the button I added the ref to the fa icon in the button class like the following:

var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad fa fa-pencil', name:'btnOpenPad', value:'OpenPad' });

但是，按钮中完全没有图标，唯一的变化是按钮的大小和文本字体已更改.

However, the icon is completely missing from the button, the only change being that the size of the button and the font of the text has changed.

我的问题是:有没有办法在如此附加的按钮中插入超棒的字体图标?

此处是带有按钮的html表的图像.

Image of the html table with buttons is reproduced here.

推荐答案

尝试通过html()而不是appand()

try adding via html () instead of appand()

let ButtonCellTag = $('#'+ tempButtonCellTag);
ButtonCellTag.html(ButtonCellTag.html() + btnOpenPad)

这篇关于如何在动态创建的按钮中添加字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！