Ajout dynamique d'un glyphe à une ligne de tableau

Question

J'ai une table html sur mon site Web qui affiche un flux de données en direct. Je récupère cela en utilisant une combinaison de PHP, MySQL et AJAX.

Les lignes de table sont ajoutées à la table lorsque de nouvelles données sont extraites. Tout fonctionne comme prévu.

Je voudrais ajouter un glyphicon à un <td> en fonction du contenu d'une variable javascript.

Ma table html est la suivante;

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

La jquery qui ajoute des lignes à la table;

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

Ce que je veux faire est,

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

Ainsi, les lignes de la table devrait ressembler;

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

Ou;

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

Un conseil est apprécié.

Answer 1

Déterminez quelle icône vous voulez afficher, stockez-la dans une variable et ajoutez-la à la chaîne que vous passez dans la méthode 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

C'est une façon de le faire: nous créons une variable qui sera mis à la classe d'icônes correcte, selon la direction.

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

Maintenant que nous avons le nom de classe de l'icône, nous pouvons créer l'élément span.

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

Voilà à peu près tout. Maintenant, tout ce que nous devons faire est de l'utiliser lorsque nous créons la ligne.

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

est-data.Direction toujours présent, et est-ce toujours égal soit I ou O? Si oui, voici une version un peu plus condensée des autres réponses:

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