使用CSS或jQuery转换表格单元内容

[英]Transforming tablecell content with CSS or jQuery


I have a html table similar to this:

我有一个类似于这个的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>

The cells in the first column contain a numeric value of 1, 2 or 3.

第一列中的单元格包含数值1,2或3。

I’m looking for a neat way of transforming this value into something more “graphical” using a client side approach such as CSS (preferably) or jQuery. For example, instead of “1” the cell content should be rendered as an icon, or a dot with a red color. Just setting the background color would also be ok.

我正在寻找一种巧妙的方法,使用客户端方法(如CSS(最好)或jQuery)将此值转换为更“图形化”的东西。例如,代替“1”,单元格内容应该呈现为图标,或者呈现为红色的点。只需设置背景颜色也可以。

UPDATE:

Thanks for all the suggestions. It seems it was just the Each method from jQuery I was missing. :)

感谢所有的建议。看起来它只是来自jQuery的每个方法我都不见了。 :)

Here's my final code. I wrapped it in separate function which is called on document ready and after table updates.

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

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

4 个解决方案

#1


3  

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

Thanks Eikern for the tip.

感谢Eikern提示。

#2


1  

For jQuery, try

对于jQuery,试试吧

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

#3


1  

Yet another 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. */

#4


1  

If you know it's going to be numeric, you could do something like:

如果您知道它将是数字,您可以执行以下操作:


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

This gives you a result that looks like:

这会给你一个看起来像这样的结果:

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

But of course, you could style it, change the counter character, use an image instead of °, etc.

但是,当然,您可以设置样式,更改计数器字符,使用图像而不是°等。

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2010/02/05/86e1f5d0f4dcdf83595b853dbf3a72e6.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告