Javascript中的HTML Table條件格式代碼無法按計划工作

Question

我正在嘗試創建一組規則，這些規則在我的table中影響行樣式的td元素值之間相互依賴。

首要問題

我在某些規則下有條件地格式化表格行以設置不同的背景顏色。

預期結果：

• 如果寬度> 0 =>顏色為紅色
• 如果Width == 0 && Height> 0 =>顏色藍色
• 如果寬度> 0 &&高度> 0 =>顏色黃色
• 如果寬度== 0 &&高度== 0 =>顏色白色

現實結果

• 寬度> 0 =>紅色= 工作
• 寬度== 0 &&高度> 0 =>顏色藍色✓作品
• 如果寬度> 0 &&高度> 0 =>顏色黃色X不起作用，則顏色為藍色。
• 如果寬度== 0 &&高度== 0 =>顏色白色✓工作

---

第二期

是當我按選擇“每頁行數”或分頁號時，它將失去任何條件樣式。

如果您有更好的方法，請隨時提出最佳實踐來執行此操作。 謝謝，這是我的代碼：

的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>

Java腳本

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-els來確定該行的顏色，而是定義了一個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);
        });
});