爲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