グリフコンを動的にテーブル行に追加する

Question

私はライブデータを表示している私のウェブサイトに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。私がやりたいことはそうテーブルの行がどのように見えるべきで、

// 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> 
} 

ある

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

。

// 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

これはそれを行う方法の一つである：我々は方向に応じて、正しいアイコンクラスに設定される変数を作成しています。

アイコンのクラス名ができたので、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>');