html 表格的条件格式因列而异

Question

我正在尝试修改在这里找到的代码：

conditional formatting of html table cells

我有两组不同的格式规则。决赛桌将有 37 列。大多数将使用规则 1 进行格式化，大约 10 个将使用规则 2 进行格式化。

到目前为止，这是我的工作的一个 jsfiddle：

http://jsfiddle.net/8ed89exs/3/

代码如下：

html

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>0.1</th>
        <th>0.2</th>
        <th>0.3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Allan, Paul</td>
        <td>-9</td>
        <td>-9</td>
        <td>-9</td>
    </tr>
    <tr>
        <td>Bartlett, James</td>
        <td>-5</td>
        <td>-5</td>
        <td>-5</td>
    </tr>
    <tr>
        <td>Callow, Simon</td>
        <td>-2</td>
        <td>-2</td>
        <td>-2</td>
    </tr>
    <tr>
        <td>Dennis, Mark</td>
        <td>-1</td>
        <td>-1</td>
        <td>-1</td>
    </tr>
    <tr>
        <td>Ennals, Simon</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Finnegan, Seamus</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Goldberg, John</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
    </tr>
</tbody>

css

table {
    width: 13em;
}


th {
    border-bottom: 2px solid #ccc;
    padding: 0.1em 0 0.0em 0;
    font-size: .9em;
}

td {
    border-bottom: 0px solid #ccc;
    padding: 0.1em 0 0.1em 0;
    text-align: center;
}


.abovePlus {
    background-color: #1b7837; color: #fff;
}

.above {
    background-color: #7fbf7b; color: #000;
}

.high {
    background-color: #d9f0d3; color: #000;
}

.at {
    background-color: #ffffff; color: #000;
}

.low {
    background-color: #e7d4e8; color: #000;
}

.below {
    background-color: #af8dc3; color: #000;
}

.belowPlus {
    background-color: #762a83; color: #fff;
}

js

$(function() {
$( "td" ).each(function(index) {
    var scale = [['abovePlus', 20, 20], ['above', 5, 6], ['high', 2, 1], ['at', 0, 0], ['low', -1, -2], ['below', -2, -4], ['belowPlus', -9, -9]];
    var score = $(this).text();
    var column = [[0, 1], [1, 1], [2, 2], [3, 1]];

            for (var i = 0; i < scale.length; i++)
             {    

                if (score <= scale[i][1]) {
                    $(this).addClass(scale[i][0]);
                }
            }

        });
   });

如上所示，所有列都按照规则一进行格式化。如果我改变：

if (score <= scale[i][1]) {

到

if (score <= scale[i][2]) {

所有列都将按照规则 2 进行格式化。

我需要能够让一些列按照规则 1 格式化，其他列按照规则 2。列数组将定义哪些列将按照哪些规则进行格式化（在最终产品中将有 37 列）。

我正在尝试使用变量来做到这一点：

var x = column[i][1];

然后改变

if (score <= scale[i][1]) {

到

if (score <= scale[i][x]) {

但是当我放置

var x = column[i][1];

进入循环块代码格式化失败。

我对 js 的经验有限，所以我想知道我是否犯了语法错误。

我试图开始工作的代码是：

$(function() {
    $( "td" ).each(function(index) {
        var scale = [['abovePlus', 20, 20], ['above', 5, 6], ['high', 2, 1], ['at', 0, 0], ['low', -1, -2], ['below', -2, -4], ['belowPlus', -9, -9]];
        var score = $(this).text();
        var column = [[0, 1], [1, 1], [2, 2], [3, 1]];

                for (var i = 0; i < scale.length; i++)
                 {    
                    var x = column[i][1];

                    if (score <= scale[i][x]) {
                        $(this).addClass(scale[i][0]);
                    }
                }

            });
       });

感谢您的帮助。

Answer 1

如果我理解了这个问题，也许这会有所帮助

//it is easier to handle with json array
var scale = [{'class': 'abovePlus', 'r1': 20,    'r2': 20}, 
             {'class': 'above',    'r1': 5,    'r2': 6}, 
             {'class': 'high',    'r1': 2,    'r2': 1}, 
             {'class': 'at',    'r1': 0,    'r2': 0}, 
             {'class': 'low',    'r1': -1,    'r2': -2}, 
             {'class': 'below',    'r1': -2,    'r2': -4}, 
             {'class': 'belowPlus',    'r1': -9,    'r2': -9}];
//three columns with data. skipping first
var column = [
    [0, 1],
    [1, 1],
    [2, 2]
];

$(function () {
    //finds each row
    $("tr").each(function () {
        //in row find each cell (td), but not the first
        $(this).find('td').not(':first').each(function (index) {

            var $td = $(this);
            //get score            
            var score = $(this).text();

            //moves through a variable
            $.each(scale, function (i, scl) {
                //get class, and value 1 i 2
                var newClass = scl.class;
                var r1 = scl.r1;
                var r2 = scl.r2;
                //get rul for column
                var rule = column[index][1];
                //based on the rules and values, add class to cell (td)
                if (rule == 1 && score < r1) $td.addClass(newClass);
                if (rule == 2 && score < r2) $td.addClass(newClass);

            })

        });

    })
});

TEST