0

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

4

3 回答 3

0

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

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

于 2013-04-27T12:45:47.263 回答
0

试试这个 ：

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 演示：http: //jsfiddle.net/aVqCU/

于 2013-04-27T16:54:53.187 回答
0

这是给你的东西（http://jsfiddle.net/AbnCz/3/）。这不像算法那样可扩展，但可以根据您的要求工作。如果您最终添加更多行/列，请在colors数组中添加适当的颜色。

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

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

   }

}
于 2013-04-27T18:17:24.547 回答