使用 JavaScript 更改表格行的背景颜色

提供表格数据的许多站点使用交替的背景色来增加该数据的可读性。 当我开发一个网站时，我意识到我也想这样做。 问题？ 就我而言，该表不是由服务器端应用程序或脚本生成的，您可以在Web上找到大量示例。

显而易见的解决方案是对第二行进行硬编码，以确保其具有不同的背景色。 但是我希望表格是动态的，以便可以在表格的中间添加新行，而无需更改后面各行的背景颜色属性。

我的解决方案使用JavaScript，因为CSS3并不是真正可行的选择。 当今的浏览器仍在努力支持CSS1和CSS2。 尽管不建议将HTML表用于网页布局，但它们仍然非常适合表格式数据的表示。 在本教程中，我将基于相同的思想介绍三个示例。 我仅在Windows平台上测试了IE6、Firefox 1.0、Mozilla 1.7.3和Opera 7.54中的解决方案。

入门

让我们从一个普通的html表开始。 在这种情况下，表格是否包含头/脚元素无关紧要：

 

   

   

         

 

0 - some txt
 

1 - some txt
2 - some txt
3 - some txt
4 - some txt

现在，我们需要检查浏览器是否相当新并且具有必要的JavaScript功能（即W3C DOM支持）。 下一行执行此检查，从而使Netscape 4和该代其他产品不合格。 此类浏览器不会尝试为表格着色。

if(document.getElementById)

还要注意，所有这些示例的共同点是此代码：

var table = document.getElementById(id);   

var rows = table.getElementsByTagName("tr");   

for(i = 0; i < rows.length; i++){           

    //manipulate rows 

      ...

例子1

第一个示例使用一个style元素，通过它我们为背景色定义了两个类：

样式是灵活的：它也可以定义其他内容，例如第二行应以斜体显示。 完整的功能如下所示：

function alternate(id){ 

  if(document.getElementsByTagName){  

    var table = document.getElementById(id);   

    var rows = table.getElementsByTagName("tr");   

    for(i = 0; i < rows.length; i++){           

  //manipulate rows 

      if(i % 2 == 0){ 

        rows[i].className = "even"; 

      }else{ 

        rows[i].className = "odd"; 

      }       

    } 

  } 

}

在此，取模运算符%得到除法的余数。

上面的函数应该从body标签的onload事件中调用：

 

... 

 

 

...
 

 

...

例子2

让我们继续下一个示例-一些冒险的事情。 我想使用几种而不是仅使用两种交替的颜色。 让我们添加一个包含所有这些颜色的数组。

由于在HTML中定义了名称的颜色数量有限，因此我们将切换为十六进制值。 产生的颜色将由三个值组成：红色、绿色和蓝色。 当所有三种颜色都以#ffffff最大值打开时，将获得白色。 相反的黑色是#000000 。

//various gray shades  

var colors = new Array('#ffffff','#dddddd','#aaaaaa','#888888');

行操作代码将仅包含一行，但是除了复制和粘贴相同的代码外，我们将进行单独的函数调用：

for(...  

//manipulate rows  

doMultiple(rows[i], i);  

...  

  

function doMultiple(row, i){  

row.style.backgroundColor = colors[i % colors.length];  

}  

  

function doAlternate(row, i){  

  if(i % 2 == 0){  

    row.className = "even";  

  }else{  

    row.className = "odd";  

  }  

}

在这里，我还为示例1添加了一个名为doAlternate的函数。 这样可以更轻松地在不同方法之间进行切换，从而可以改变表格的行颜色。

如上面的片段所示，可以为行设置CSS类名称或HTML标签的特定属性：

rows[i].className  

rows[i].style.backgroundColor

例子3

最后一个示例显示了一个非常多彩的变体，其中根据表中的行数，起始颜色和给定因子来计算颜色。

首先，我们需要设置一些变量：

var color = 255;     //starting color (in decimal)  

var steps = 20;    //the factor, a "distance" between colors   

var down = true;  //direction, if going up or down when calculating //color value

现在，我们添加一个新函数doGradient 。

function doGradient(row){  

  bgcolorValue = padHex() + bgcolor.toString(16)   

    + padHex() + bgcolor.toString(16) + "ff";   

  row.style.backgroundColor = "#" + bgcolorValue;   

  if(down && (bgcolor-steps) > 0){ //if subtracting, prevent negatives   

    bgcolor = (bgcolor - steps);   

  }else{ bgcolor = (bgcolor + steps);   

    down = false;   

  } if(bgcolor > 255){ //prevent too high values   

    bgcolor = (bgcolor - steps);   

    down = true;   

  }  

}

由于正在计算颜色，因此我们需要确保不超出范围，有效值为0到255。color参数没有分隔为RGB值，因此如果低于16则需要填充，否则该值将是非法的。 如果我们的桌子很长或steps长很大，则渐变会朝另一个方向旋转。 在此功能中， blue部分是固定的，其他两个部分已修改。

当需要转换数字时， toString方法非常方便-在这种情况下，将十进制转换为十六进制。 toString中的参数是基数，即二进制为2，十进制为10，十六进制为16。

请注意不要使显示内容过于鲜艳-我们仍然希望确保表格数据的可读性。 对于某些颜色组合，甚至可能需要使用类似以下的方法来更改表格文本的颜色：

if(color < switchingPoint){   

  row.style.color = "white";  

}else{  

  row.style.color = "black";  

}

结论

使用CSS和JavaScript，添加或提高代码的可读性相当容易，而无需从服务器应用程序重新生成HTML页面。 正如我们在这里看到的，它也可以添加到静态HTML页面上。 要查看这些示例，请下载包含代码的HTML文件 。

原文链接: https://www.sitepoint.com/background-colors-javascript/