HTML

Question

我有一个带数字的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吗？任何人都可以帮助代码吗？

Answer 1

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

 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将文本转换为数字。

Answer 2

试试这个：

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：

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;

                    }
                }

我实现的另一个功能是动态。尝试增加细胞数量，它仍将计算。

请根据您的喜好更改colorArray。按列排序。像var colorArray = new Array('#000','#333','#667');

这样的东西

jsfiddle demo：http://jsfiddle.net/aVqCU/

Answer 3

这是给你的东西（http://jsfiddle.net/AbnCz/3/）。这不是一个很好的算法，但可以按照您的要求工作。如果最终添加更多行/列，请在colors数组中添加适当的颜色。

＆GT;更新：进行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];           
       }

   }

}

根据数学Javascript单元格颜色

3 个答案:

HTML

的Javascript