Javascript单元格颜色根据数学

我有一个带有数字的html表格。例如：

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

我想使用Javascript，根据以下数学公式，每个单元格都有一个特定的颜色背景： 如果三列中的一列（每行）大于其他两列的总和 例如：

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

---

我可以用Javascript来做吗？有人能帮我编写代码吗？

我自己还没有测试过这段代码。但应该是这样的：

 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";
    }
}

您可能需要在row.cells上使用parseInt或parseFloat将文本转换为数字。

尝试以下操作：

HTML:

3.
5.
1.
1.
2.
4.
16
13
2.

JAVASCRIPT:

var table = document.getElementById('dataTable'), activeCells
                    row = table.getElementsByTagName('tr'),
                    cell = table.getElementsByTagName('td');

                var colorArray = new Array('red', 'blue', 'yellow');

                //loop through all rows
                for ( var i = 0; i < row.length; ++i) {

                    //get cells currently being read
                    activeCells = row[i].getElementsByTagName('td');

                    //prepare storage
                    var cellArray = new Array(),
                        newCellArray = new Array(),
                        cellElementArray = new Array(),
                        sum = 0;

                    //loop through active cells
                    for ( var x = 0; x < activeCells.length; ++x ) {

                        var currentCell = activeCells[x],
                            cellVal = parseInt( currentCell.innerHTML );

                        cellArray[x] = cellVal;
                        newCellArray[x] = cellVal;

                        cellElementArray[x] = currentCell;

                    }

                    //loop through Cell Array
                    for ( var y = 0; y < cellArray.length; ++y ) {

                        newCellArray.splice(y, 1);

                        for ( var z = 0; z < newCellArray.length; ++z ) {
                            sum += newCellArray[z];
                        }

                        newCellArray = [];

                        for ( var n = 0; n < cellArray.length; ++n ) {
                            newCellArray[n] = cellArray[n];
                        }

                        console.log( sum);

                        if ( cellArray[y] > sum ) {

                            console.log( 'in');

                            cellElementArray[y].style.backgroundColor = colorArray[y];
                        }

                        sum = 0;

                    }
                }

var table=document.getElementById（'dataTable'），activeCells
行=table.getElementsByTagName（'tr'），
cell=table.getElementsByTagName（'td'）；
var colorArray=新数组（“红色”、“蓝色”、“黄色”）；
//循环遍历所有行
对于（变量i=0；i总和）{
console.log（'in'）；
cellElementArray[y].style.backgroundColor=colorArray[y]；
}
总和=0；
}
}

我实现的另一个特性是这是动态的。尝试增加单元格的数量，它仍会计算

请根据您的喜好更改颜色数组。它是按列排序的。类似于

var colorArray=new数组（'000'，'333'，'667'）

jsiddle演示：
这里有一些东西给你（）。这不能像algo那样扩展，但可以根据您的需求工作。如果最后添加了更多行/列，请在
colors
数组中添加适当的颜色

>更新：进行性能更新以缓存总和，而不是通过每个单元格遍历来确定总和

HTML

20
50
70
40
2.
7.
5.
2.
60

Javascript
var colors=[“000”、“333”、“666”]；
var t=document.getElementById（'dataTable'）；
var rows=t.getElementsByTagName（'tr'），行，单元格，tgtCell，行和，其他SSUM；
//让我们看一下这几排
对于（var r=0；rCan）您可以显示您的代码吗谢谢@asaghan的回复！我的表id是“id='myTable'”。因此我定制了您的代码以确保其正常工作，如下所示：var table=document.getElementById（“myTable”）；//在HTML中用表的id替换“table”（var i=0，row；row=table.rows[i]；i++）//遍历行{row.cells[10]。style.backgroundColor=“#000”；}但什么也没发生。有什么想法吗？请注意，只有在所有数字都为positive@DragosBobolea是的！正如@Asagohan所说，我所有的数字都将>=0，您必须将值转换为数字。添加类似于
var cell0=parseFloat（row.cells[0]）的内容；//另一个if（cell0>cell1+cell2）也一样。//bla-bla-bla
我已经更新了使用parseInt的代码。现在试试。另外，还可以查看一下获取firefox的firebug，您可以使用它来调试代码，看看发生了什么。
var table = document.getElementById('dataTable'), activeCells
                    row = table.getElementsByTagName('tr'),
                    cell = table.getElementsByTagName('td');

                var colorArray = new Array('red', 'blue', 'yellow');

                //loop through all rows
                for ( var i = 0; i < row.length; ++i) {

                    //get cells currently being read
                    activeCells = row[i].getElementsByTagName('td');

                    //prepare storage
                    var cellArray = new Array(),
                        newCellArray = new Array(),
                        cellElementArray = new Array(),
                        sum = 0;

                    //loop through active cells
                    for ( var x = 0; x < activeCells.length; ++x ) {

                        var currentCell = activeCells[x],
                            cellVal = parseInt( currentCell.innerHTML );

                        cellArray[x] = cellVal;
                        newCellArray[x] = cellVal;

                        cellElementArray[x] = currentCell;

                    }

                    //loop through Cell Array
                    for ( var y = 0; y < cellArray.length; ++y ) {

                        newCellArray.splice(y, 1);

                        for ( var z = 0; z < newCellArray.length; ++z ) {
                            sum += newCellArray[z];
                        }

                        newCellArray = [];

                        for ( var n = 0; n < cellArray.length; ++n ) {
                            newCellArray[n] = cellArray[n];
                        }

                        console.log( sum);

                        if ( cellArray[y] > sum ) {

                            console.log( 'in');

                            cellElementArray[y].style.backgroundColor = colorArray[y];
                        }

                        sum = 0;

                    }
                }

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

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];           
       }

   }

}