Question

我有一个基本表，其中包含我试图控制格式的值。我在这个例子中实现了这一点服务1的KPI2 http://jsfiddle.net/hVJ4b/。

$('#work_table td.r2c1').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

    $('#work_table td.r2c2').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

    $('#work_table td.r2c3').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

    $('#work_table td.r2c4').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

现在我可以轻松地复制并粘贴我的JQuery以将其应用于其他行/ KPI。但我正在寻找一种更好的方法来做到这一点，而不是复制和粘贴，因为我认为这不是一个好习惯。

有人可以提供这方面的建议吗？

注意：我最初的方法可能完全错误。我还希望它能够灵活地在以后对表进行任何更改/添加...

Answer 1

如果您将相同的代码复制/粘贴到每个代码中，只需将它们全部组合使用：

var $worktable = $('#work_table'),
    $cells = $worktable.find('td');

$cells.filter('.r2c1, .r2c2, .r2c3, .r2c4').each(function ()
{
    // your code here.
});

当您插入代码时，它看起来像这样：See working jsFiddle demo。

为了便于阅读，我清理了一下。我删除了注释掉的部分。您可以随时添加这些内容。我还使用缓存的变量稍微优化了它。

这是我使用的jQuery：

var red = "#ff0000",
    green = "#00ff00",
    orange = "#ff7f00";

$(function () 
{
    var $worktable = $('#work_table'),
        $cells = $worktable.find('td');

    $cells.filter('.r2').each(function () 
    {
        var $this = $(this),
            test = parseFloat($this.html());

        if (test >= 3)
            $this.css('background-color', '#f0f');
    });

    $cells.filter('.r2c1, .r2c2, .r2c3, .r2c4').each(function ()
    { 
        var $this = $(this),
            test = parseFloat($this.html()),
            target = parseFloat($cells.filter('.r2c5').html()),
            target2 = parseFloat(target - 5),
            color = test >= target 
                    ? green 
                    : test < target && test >= target2 
                        ? orange 
                        : red;

        $this.css('background-color', color);
    });
});

Answer 2

为什么不考虑编写一个带有名为rowname的变量的泛型函数，然后你只需要通过函数外的jquery传入你的行。

 var x = $('#work_table td.r2');
 rowcolor (x);

function rowcolor (rowname)
{
    $(rowname).each(function(){//this is r2 for an example             want to get it to work for > values 
    //var test = $(this).html(); // this works
    var test = $(this).val(); // this does not work
    //alert("test: " + test);
    if ($(this).html() >= 3) {
        //alert($(this).value())
       $(this).css('background-color','#f0f');
    }
});


}

我上面说的那个人说的很好。我的风格更加流行。

Answer 3

以下是我将如何进行的。我根本不担心课程。你知道单元格的位置，所以你可以循环遍历每一行，然后循环遍历该行和颜色中的每个单元格。

See working jsFiddle demo

JQUERY

var red = "#ff0000", green = "#00ff00", orange = "#ff7f00";

$(function () 
{
    $('#work_table tr').each(function (rowIndex)
    { 
        if (rowIndex > 0) // skip header row
        {
            var $row = $(this),
                $cells = $row.find('td'),
                count = $cells.length,
                target = parseFloat($cells[count - 2].innerText),
                target2 = target - 5.0;

            $cells.each(function (cellIndex)
            {
                var min = count - 6, 
                    max = count - 3;

                if (cellIndex >= min && cellIndex <= max) // only date cells
                {
                    var $cell = $(this),
                        value = parseFloat(this.innerText),
                        color = value >= target 
                                    ? green : value < target && value >= target2 
                                        ? orange : red;

                    $cell.css('background-color', color);
                }
            });
        }
    });
});

HTML

<table id="work_table" border="2">
    <tr>
        <th>Service</th>
        <th>Measure</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Date3</th>
        <th>Date4</th>
        <th>Target</th>
        <th>Trend</th>
    </tr>
    <tr>
        <td rowspan="4">Service1</td>
        <td>KPI1</td>
        <td>93.9</td>
        <td>99.0</td>
        <td>98.9</td>
        <td>99.0</td>
        <td>99.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI2</td>
        <td>91.4</td>
        <td>94.2</td>
        <td>75.9</td>
        <td>47.2.</td>
        <td>99.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI3</td>
        <td>91.0</td>
        <td>92.1</td>
        <td>83.9</td>
        <td>84.9</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI4</td>
        <td>95.7</td>
        <td>94.6</td>
        <td>87.4</td>
        <td>88.3</td>
        <td>92.4</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td rowspan="3">Service2</td>
        <td>KPI1</td>
        <td>45.0</td>
        <td>95.3</td>
        <td>76.4</td>
        <td>34.5</td>
        <td>90.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI2</td>
        <td>91.0</td>
        <td>92.1</td>
        <td>83.9</td>
        <td>84.9</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI3</td>
        <td>97.0</td>
        <td>96.1</td>
        <td>85.9</td>
        <td>84.9</td>
        <td>93.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td rowspan="5">Service3</td>
        <td>KPI1</td>
        <td>97.0</td>
        <td>93.1</td>
        <td>86.9</td>
        <td>82.9</td>
        <td>94.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI2</td>
        <td>50.2</td>
        <td>76.3</td>
        <td>69.4</td>
        <td>84.5</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI3</td>
        <td>12.0</td>
        <td>93.1</td>
        <td>87.9</td>
        <td>86.9</td>
        <td>97.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI4</td>
        <td>91.0</td>
        <td>92.1</td>
        <td>83.9</td>
        <td>84.9</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI5</td>
        <td>99.0</td>
        <td>99.1</td>
        <td>89.2</td>
        <td>89.3</td>
        <td>99.0</td>
        <td>Value_Trend</td>
    </tr>
</table>

结果

Results

使用jQuery在html中进行表格格式化

3 个答案:

See working jsFiddle demo

JQUERY

HTML

结果