Question

我有一个ASP.NET数据透视表，在该表的单元格中有各种值1,2,3或4.无论选择哪个值，都会将单元格转换为四种颜色之一。

$(function () {

        var colors = { 1: 'green', 2: 'orange', 3: 'red', 4: 'blue' };
        $("td").css('background-color', function (index, value) {
            var txt = $(this).text();
            if (colors.hasOwnProperty(txt)) {
                $(this).html('&nbsp;') 
                return colors[txt];
            }
            return value;
        });

    });

在基本理论中，这段代码工作得很好，但是，我想做的是，而不是整个表格单元格转动某种颜色，我希望表格单元格的一部分根据单个变成某种颜色来自我的数据库的价值！

目前如果一个单元格中有3条记录（比方说3,2,4），那么代替数字是单独的，单元格输出分为3个部分，红色，橙色和蓝色，它们相加（9）并且根本没有添加颜色值。

Answer 1

这是HTML架构的问题。您可以为每个数字使用span来划分单元格，并将颜色应用于跨度而不是整个TD

检查此fiddle

HTML：

<td>
    <span>3</span>
    <span>2</span>
    <span>4</span>
  </td>

CSS：

span {
display:block;
    float:left;
}

JS：

  var colors = ['green','orange','red','blue'];
$("span").each(function(){
             col = parseInt($(this).text());
                $(this).css('background-color', colors[col-1]);

});

JQuery中的一个单元格中的多种颜色

1 个答案: