Преобразование содержимого табличных ячеек с помощью CSS или jQuery

Question

У меня есть HTML-таблица, подобная этой:

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

Ячейки в первом столбце содержат числовые значения 1, 2 или 3.

Я ищу аккуратный способ преобразования этого значения в нечто более «графическое» с использованием подхода на стороне клиента, такого как CSS (предпочтительно) или jQuery. Например, вместо «1» содержимое ячейки должно отображаться в виде значка или точки красного цвета. Просто установите цвет фона.

UPDATE:

Спасибо за все предложения. Кажется, это был просто метод Each из jQuery, который мне не хватало. :)

Вот мой окончательный код. Я обернул его в отдельную функцию, которая вызывается для готового документа и после обновления таблицы.

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

Спасибо Eikern за чаевые.

Answer 2

Если вы знаете, что оно будет числовым, вы можете сделать что-то вроде:

$(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);
  });
});

Это дает вам результат, который выглядит следующим образом:

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

Но, конечно, вы могли бы оформить его, изменить счетчик, использовать изображение вместо & deg; и т. Д.

Answer 3

Еще одно решение:

$("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

Для jQuery попробуйте

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