将 Glyphicon 动态添加到表格行答案

【问题标题】：Add Glyphicon to Table Row Dynamically将 Glyphicon 动态添加到表格行
【发布时间】：2018-01-26 01:41:56
【问题描述】：

我的网站上有一个显示实时数据源的 html 表格。我正在使用 PHP、MySQL 和 AJAX 的组合来检索它。

在检索新数据时将表行添加到表中。一切都按预期进行。

我想根据 javascript 变量的内容向 <td> 添加一个字形图标。

我的html表格如下；

<table id="transactionTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Date / Time</th>
            <th>Card No</th>
            <th>Direction</th>
        </tr>
    </thead>
</table>

向表中添加行的jquery；

$("#transactionTable").prepend('<tr><td>'+data.SerialNo+'</td><td>'+dateFormatted+'</td><td>'+data.CardNo+'</td><td id="direction">'+data.Direction+'</td></tr>');

我想做的是，

// data.Direction is coming from the server

if(data.Direction == 'I') {
    // add <span class="glyphicon glyphicon-import"></span>
 }
if(data.Direction == 'O') {
    // <span class="glyphicon glyphicon-export"></span>
}

所以表格行应该是这样的；

// if(data.Direction == 'I')
<tr>
    <td>1</td>
    <td>News</td>
    <td>News Cate</td>
    <td><span class="glyphicon glyphicon-import"></span> In</td>
</tr>

或者;

// if(data.Direction == 'O')
<tr>
    <td>1</td>
    <td>News</td>
    <td>News Cate</td>
    <td><span class="glyphicon glyphicon-export"></span> In</td>
</tr>

感谢任何建议。

【问题讨论】：

标签： javascript jquery html glyphicons

【解决方案1】：

确定要显示的图标，将其存储在变量中，然后将其添加到要传递给 prepend 方法的字符串中。

var iconHtml = '';

if (data.Direction == 'I') {
    iconHtml = '<span class="glyphicon glyphicon-import"></span> ';
}
if (data.Direction === 'O') {
    iconHtml = '<span class="glyphicon glyphicon-export"></span> ';
}

$("#transactionTable").prepend('<tr><td>' + data.SerialNo +'</td><td>'+dateFormatted+'</td><td>'+data.CardNo+'</td><td id="direction">' + iconHtml +data.Direction+'</td></tr>');

```

【讨论】：

完美运行！谢谢

【解决方案2】：

这是一种方法：我们正在创建一个变量，该变量将根据方向设置为正确的图标类。

var directionIcon;

// Decide which icon class should be used depending on the data.Direction
if(data.Direction == 'I') directionIcon = 'glyphicon-import';
else if(data.Direction == 'O') directionIcon = 'glyphicon-export';

现在我们有了图标的类名，我们可以创建 span 元素了。

// Create the span using the correct icon
directionIcon = '<span class="glyphicon ' + directionIcon + '"></span>';

基本上就是这样。现在我们需要做的就是在创建行时使用它。

// Create table row, including the icon before direction
$("#transactionTable").prepend('<tr><td>'+data.SerialNo+'</td><td>'+dateFormatted+'</td><td>'+data.CardNo+'</td><td id="direction">'+ directionIcon + ' ' + data.Direction+'</td></tr>');

【讨论】：

【解决方案3】：

data.Direction 是否始终存在，它是否始终等于 I 或 O？如果是这样，这是其他答案的稍微精简的版本：

var iconSuffix = data.Direction == "I" ? "import" : "export";
$("#transactionTable").prepend('<tr><td>'+data.SerialNo+'</td><td>'+data.dateFormatted+'</td><td>'+data.CardNo+'</td><td id="direction"><span class="glyphicon glyphicon-'+iconSuffix+'"></span>'+data.Direction+'</td></tr>');

【讨论】：