Question

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

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

我想根据javascript变量的内容向<td>添加一个glyphicon。

我的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>

感谢任何建议。

Answer 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>');

```

Answer 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>');

Answer 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>');

动态地将Glyphicon添加到表行

3 个答案: