javascript - Javascript 中的 HTML 表条件格式代码未按计划工作

Question

我正在尝试创建一组规则，这些规则在我的 table 中影响行样式的 td 元素值之间相互依赖。

First issue

我对表格行进行条件格式化，以在特定规则下设置不同背景颜色的样式。

预期结果:

• 如果宽度 > 0 => 颜色为红色
• 如果宽度 == 0 && 高度 > 0 => 颜色为蓝色
• 如果宽度 > 0 && 高度 > 0 => 颜色为黄色
• 如果宽度 == 0 && 高度 == 0 => 颜色为白色

现实结果

• 宽度 > 0 => 红色✓ 有效
• 宽度 == 0 && 高度 > 0 => 蓝色✓ 有效
• 如果宽度 > 0 && 高度 > 0 => 颜色为黄色X 不起作用，颜色为蓝色。
• 如果宽度 == 0 && 高度 == 0 => 颜色为白色✓ 有效

<小时/>

Second issue

当我按下选择“每页行数”或分页编号时，它会丢失任何条件样式吗？

如果您有更好的方法，请随时建议执行此操作的最佳实践。谢谢，这是我的代码:

HTML

    <table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc">
    <thead>
    <tr>
        <th data-sortable="true" data-field="name" >Name</th>
        <th data-sortable="true" data-field="W">Width</th>
        <th data-sortable="true" data-field="H">Height</th>
        <th data-sortable="true" data-field="D">Depth</th>
    </tr>
    </thead>
</table>

Javascript

var Counter = null;
$('#table1').on('load-success.bs.table', function () {

        $('td:nth-child(2)').each(function() {
            var redValue = $(this).text();
            if (redValue > 0) {
                var oTableRow = $(this).parent();
                oTableRow.css('background-color', 'red');
                Counter = 1; //W>0
            }else if(redValue == 0){
                Counter = 2;
            }
        });
        $('td:nth-child(3)').each(function() {
            var blueValue = $(this).text();
            var oTableRow = $(this).parent();
            if ((Counter= 2) && (blueValue > 0)) {
                oTableRow.css('background-color', 'blue');
            }else if((Counter == 1)&&(blueValue > 0)){
                oTableRow.css('background-color', 'yellow');

            }
        });
    });

JSON 数据集

    [{
  "name": "First Value",
  "W": 0,
  "H": 0,
  "D": 100
},{
"name": "First Value",
"W": 1,
"H": 0,
"D": 100
},{
"name": "First Value",
"W": 0,
"H": 1,
"D": 100
},{
"name": "First Value",
"W": 1,
"H": 1,
"D": 100
}];

Answer 1

正如@charlietfl所说，您想要循环行，然后检查条件并按行设置颜色。然后，我没有使用嵌套的 if-else 来确定该行的颜色，而是定义了一个 2x2 表 colorMapping ，其中包含每个可能结果的颜色:

• 第一行:高度 === 0
• 第二行:高度 > 0
• 第一列:宽度 === 0
• 第二列:宽度 > 0

这应该可以完成工作:

$('#table1').on('load-success.bs.table', function(){
    //create a color-mapping
    var colorMapping = [
        'white', 'red',
        'blue',  'yellow'
    ];

    $('tr', this)   //get rows ...
        .has('td')  //... that contain td-nodes
        .each(function(){
            var $row = $(this);
            //get w for this row
            var w = +$row.find('td:eq(1)').text();
            //get h for this row
            var h = +$row.find('td:eq(2)').text();

            //check wich of the four colors to choose
            var color = colorMapping[ (h>0? 2: 0) + (w>0? 1: 0) ];

            //assign color to this row
            $row.css('background-color', color);
        });
});