提供表格数据的许多站点使用交替的背景色来增加该数据的可读性。 在开发网站时，我意识到我也想这样做。 问题？ 在我的情况下，该表不是由服务器端应用程序或脚本生成的，您可以在Web上找到大量示例。
显而易见的解决方案是对第二行进行硬编码，以确保其具有不同的背景色。 但是我希望表是动态的，以便可以在表中间添加新行，而无需更改后面各行的背景颜色属性。
我的解决方案使用JavaScript，因为CSS3并不是真正可行的选择。 当今的浏览器仍在努力支持CSS1和CSS2。 尽管不建议将HTML表用于网页布局，但它们仍然非常适合表格式数据的表示。 在本教程中，我将基于相同的思想介绍三个示例。 我仅在Windows平台上测试了IE6，Firefox 1.0，Mozilla 1.7.3和Opera 7.54中的解决方案。
入门
让我们从一个普通的html表开始。 在这种情况下，表格是否包含头/脚元素无关紧要：
<table id="theTable">
<tr><td>0 - some txt</td></tr>
<tr><td>1 - some txt</td></tr>
<tr><td>2 - some txt</td></tr>
<tr><td>3 - some txt</td></tr>
<tr><td>4 - some txt</td></tr>
</table>现在，我们需要检查浏览器是否相当新并且具有必要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元素，通过它我们为背景色定义了两个类：
<style>
.odd{background-color: white;}
.even{background-color: gray;}
</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事件中调用：
<html>
...
<body onload="alternate('thetable')">
<table id="thetable">
<tr><td>...</td></tr>
</table>
...结果可能如下所示：
例子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示例2的结果可能如下所示：
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
例子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。 下图显示了该表格在Firefox 1.0，IE6，Mozilla 1.7和Opera 7.5中的结果中的显示方式。
请注意不要使显示内容过于鲜艳-我们仍然希望确保表格数据的可读性。 对于某些颜色组合，甚至可能需要使用类似以下的方法来更改表格文本的颜色：
if(color < switchingPoint){
row.style.color = "white";
}else{
row.style.color = "black";
}结论
使用CSS和JavaScript，添加或增加代码的可读性相当容易，而无需从服务器应用程序重新生成HTML页面。 正如我们在这里看到的，它也可以添加到静态HTML页面上。 要查看这些示例，请下载包含代码HTML文件 。
翻译自: https://www.sitepoint.com/background-colors-javascript/
5740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
