如何为javascript中的每个tr元素指定背景颜色？答案

【问题标题】：how to specify a background color for every tr element in javascript?如何为javascript中的每个tr元素指定背景颜色？
【发布时间】：2014-05-07 10:55:53
【问题描述】：

我有多个带有 bgcolors 之类的 tr

<tr bgcolor="#OC6110">
<tr bgcolor="#000000">
<tr bgcolor="#FFFFFF">

我想为每个 tr 元素赋予不同的背景颜色，而不指定其 id 值。我需要在 javascript 或 CSS 中进行更改。我不想接触 HTML。

有可能吗？

已经在 html 中给出了一些 bgcolors..我需要在不触及 html 的情况下覆盖它

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用以下函数来获取随机颜色

function get_color() {
    var lt= '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += lt[Math.round(Math.random() * 15)];
    }
    return color;
}

并应用颜色使用

$("tr").each(function() {
    $(this).css("background-color", get_color());
});

source and more solutions here

更新：

根据评论，您可以将颜色值存储在数组中并像这样使用它们：

var myColors = ['#f00','#ff0','#fff'];//store the color values here

$("tr").each(function() {
   for(var i=0; i<myColors.length;i++){    
     $(this).css("background-color", myColors[i]);
   }
});

【讨论】：

我想为每个 tr 提一下特定的 bgcolor..如何从 html 页面中识别特定的 tr？

【解决方案2】：

你也可以试试这个

$(function() {
    $("table tr").each(function() {
        var color = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
         $(this).css("background-color", color);
    });
});

【讨论】：

【解决方案3】：

你可以使用jquery

$('tr:odd').css("background-color", "#OC6110");

$('tr:even').css("background-color", "#000000");

【讨论】：

我需要它在 javascript 或 CSS..No jquery
请解释你的答案。
索引#0的行

索引#1的行

索引#2的行

索引#3的行

【解决方案4】：

是的，您可以使用document.getElementsByTagName('tr') 获取所有tr 元素的列表，然后您可以使用setAttribute('bgColor', yourNewTextStringRepresentingAColorHere); 遍历该NodeList 中的元素（就像一个数组，有细微的差别）

类似这样的：

function colourAllTrs()
{
  var trList = document.getElementsByTagName('tr');
  var i, n = trList.length;
  for (i=0; i<n; i++)
  {
    newColor = '#123456';
    trList[i].setAttribute('bgcolor', newColor);
  }
}

您可以使用C-link 的getColor 函数，而不是简单地使用#123456。

【讨论】：

【解决方案5】：

试试这个 JavaScript 解决方案。

var colors = ['#999999','#000000','#cccccc'],
    myTrs = document.getElementsByTagName('tr');

for(i=0, len = myTrs.length; i < len; i++){
    myTrs[i].style.backgroundColor = colors[i % colors.length]
};

Updated Fiddle Demo

【讨论】：

我已经提到没有指定它的id值
什么是 myTable？它是我们在 html 中提到的表名，对吗？我问过没有改变 html..我需要用 css 或 javascript 编码..
是的，它是 html 中的标记名称，我们没有对 html 进行任何更改

你知道如何通过计算html页面中的计数来改变tr bgcolor