jquery - 使用 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”。设置背景色也可以。

更新:

感谢所有建议。看来我只是缺少 jQuery 中的 Each 方法。 :)

这是我的最终代码。我将它包装在单独的函数中，该函数在文档准备就绪时和表更新后调用。

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 的提示。