根據數學計算的Javascript單元格顏色

Question

我有一個帶有數字的html表格。例如：

Col1 Col2 Col3 
5 3 1 
1 2 1 
10 3 2 

而且我想，以使用JavaScript每個單元都有一個特定的背景顏色根據以下數學： 如果三列（每列）中的一個比的總和其他2列 例如：

Col1 > Col2 + Col3 => bkg color: #000 
Col2 > Col1 + Col3 => bkg color: #333 
Col3 > Col1 + Col3 => bkg color: #666 

我可以用Javascript來做到嗎？任何人都可以幫助代碼？

Answer 1

這裏的東西給你（http://jsfiddle.net/AbnCz/3/）。這不會像算法那樣很好地擴展，但按您的要求工作。如果最終添加更多行/列，請在colors陣列中添加適當的顏色。

>更新：由PERF更新緩存的總和，而不是確定通過每個細胞穿越

HTML

<table id="dataTable"> 
    <tr> 
     <td>20</td> 
     <td>50</td> 
     <td>70</td> 
    </tr> 
    <tr> 
     <td>40</td> 
     <td>2</td> 
     <td>7</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td>2</td> 
     <td>60</td> 
    </tr> 
</table> 

的Javascript

var colors = ["#000","#333","#666"]; 
var t = document.getElementById('dataTable'); 

var rows = t.getElementsByTagName('tr'), row, cells, tgtCell, rowSum, othersSum; 

// let's go through the rows 
for(var r=0; r<rows.length; r++){ 

    row = rows[r]; 
    cells = row.getElementsByTagName('td'); 
    rowSum = 0; 

    // lets get the sum for the row. 
    // we'll subtract each cell from it to get the remaining sum. 
    for(var _c=0; _c<cells.length; _c++){ 
     rowSum += parseInt(cells[_c].textContent,10); 
    } 

    // let's go through the cells 
    for(var c=0; c<cells.length; c++){ 

     tgtCell = cells[c]; 
     tgtVal = parseInt(tgtCell.textContent, 10); 

     othersSum = rowSum - tgtVal; 

     // if the target is greater than the remaining sum, style it 
     if(tgtVal > othersSum){ 
      tgtCell.style.backgroundColor = colors[c % colors.length];   
     } 

    } 

} 

Answer 2

我自己沒有測試過這個代碼。但它應該是這樣的：

var table = document.getElementById("table"); //Replace "table" with the id of your table in the HTML 
    var table = document.getElementById("table"); //Replace "table" with the id of your table in the HTML 
for (var i = 0, row; row = table.rows[i]; i++) //iterate through rows 
{ 

    var cell1 = row.cells[0]; 
    var cell2 = row.cells[1]; 
    var cell3 = row.cells[2]; 

    if(parseFloat(cell1.innerHTML) > (parseFloat(cell2.innerHTML) + parseFloat(cell3.innerHTML))) 
    { 
     cell1.style.backgroundColor = "#000"; 
    } 
    if(parseFloat(cell2.innerHTML) > parseFloat(cell3.innerHTML) + parseFloat(cell1.innerHTML)) 
    { 
     cell2.style.backgroundColor = "#333"; 
    } 
    if(parseFloat(cell3.innerHTML) > parseFloat(cell2.innerHTML) + parseFloat(cell1.innerHTML)) 
    { 
     cell3.style.backgroundColor = "#666"; 
    } 
} 

您可能需要使用parseInt函數或parseFloat上row.cells將文本轉換爲數字。

Answer 3

謝謝大家！

的代碼如下根據您的幫助：

var table = document.getElementById("myTable"); //Replace "table" with the id of your table in the HTML 
for (var i = 0, row; row = table.rows[i]; i++) //iterate through rows 
{ 
    var cell1 = parseFloat(row.cells[10]); //same for the other if(cell0 > cell1 + cell2) 
    var cell2 = parseFloat(row.cells[11]); 
    var cell3 = parseFloat(row.cells[12]); 
    if(cells1 > cell2 + cell3) 
    { 
     row.cells[10].style.backgroundColor = "#000"; 
    } 
    else if(cell2 > cells1 + cell3) 
    { 
     row.cells[11].style.backgroundColor = "#333"; 
    } 
    else if(cell3 > cells1 + cell2) 
    { 
     row.cells[12].style.backgroundColor = "#666"; 
    } 
}// JavaScript Document 

還是無濟於事。我刪除了任何css和js代碼，但仍然沒有做任何事情。任何想法？

Answer 4

試試這個：

HTML：

<table id="dataTable"> 
      <tr> 
       <td>3</td> 
       <td>5</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>4</td> 
      </tr> 
      <tr> 
       <td>16</td> 
       <td>13</td> 
       <td>2</td> 
      </tr> 
     </table> 

JAVASCRIPT：

​​

一個附加的功能，我實現的是，這是動態的。嘗試增加單元格數量，它仍然會計算。

並請根據您的喜好更改colorArray。它是按列排序的。像var colorArray = new Array('#000','#333','#667');

的jsfiddle演示：http://jsfiddle.net/aVqCU/