Transformer le contenu de TableCell avec CSS ou jQuery

Question

J'ai une table HTML semblable à ceci:

<table> 
    <tr> 
    <td>1</td> 
    <td>Some text...</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>Some text...</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Some text...</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>Some text...</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>Some text...</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>Some text...</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Some text...</td> 
    </tr> 
</table> 

Les cellules dans la première colonne contiennent une valeur numérique de 1, 2 ou 3.

Je suis à la recherche d'une façon intéressante de transformer cette valeur en quelque chose de plus «graphique» en utilisant une approche côté client telle que CSS (de préférence) ou jQuery. Par exemple, au lieu de "1", le contenu de la cellule doit être rendu sous la forme d'une icône ou d'un point avec une couleur rouge. Le simple réglage de la couleur d'arrière-plan serait également acceptable.

MISE À JOUR:

Merci pour toutes les suggestions. Il semble que c'était juste la méthode Each de jQuery qui me manquait. :)

Voici mon code final. Je l'ai enveloppé dans une fonction séparée qui est appelée sur le document prêt et après les mises à jour de la table.

function fnTransformIcons() 
{ 
    var color; 

    $("td.Icon").each(function() { 
    var value = $(this).html(); 

    switch (parseInt(value)) 
    { 
    case 0 : color = 'white'; break; 
    case 1 : color = 'red'; break; 
    case 2 : color = 'green'; break; 
    case 3 : color = 'yellow'; break; 
    } 
    $(this).css("backgroundColor", color); 
    });  
} 

Answer 1

$(document).ready(function() { 
    $("tr").each(function() { 
     switch ($("td:first",this).text()) { 
      case '1': color = 'red'; break; 
      case '2': color = 'blue'; break; 
      default: color = 'green'; 
     } 
     $($("td:first",this).css("backgroundColor", color); 
    }); 
}); 

Merci Eikern pour la pointe.

Answer 2

Pour jQuery, essayez

$("tr td:first").each(function(){ 
    // do transformations like $(this).html(...) 
}); 

Answer 3

Encore une autre solution:

$("tr td:first").each(function() { 
    $(this).addClass('my_custom_class_'+$(this).text()); 
}); 

CSS:

.my_custom_class_1 { background: red; } 
.my_custom_class_2 { background: green; } 
/* etc. */ 

Answer 4

Si vous savez que ça va être numérique, vous pouvez faire quelque chose comme:

$(function(){ 
    $('tr').each(function(){ 
    var cell = $(this).children().first(); //Get first td 
    var new_contents = ""; 
    for (i=0; i <= parseInt(cell.text()); i++) { 
     new_contents += '<span class="counter">&deg;</span>'; //or whatever counter character you like 
    } 
    cell.html(new_contents); 
    }); 
}); 

Cela vous donne une résultat qui ressemble à:

 
° Some text... 
°° Some text... 
°°° Some text... 
° Some text... 
° Some text... 
°° Some text... 
°°° Some text... 

Mais bien sûr, vous pouvez le style, changer le caractère du compteur, utiliser une image au lieu de °, etc.