Question

我正在尝试为<tr>中的每个<table>生成随机颜色，就像 -

  <tr style="background-Color:GenerateColor()">
      <th>Item Name</th>
      <th>Quantity</th>
  </tr>

使用Javascript -

 function GenerateColor() {
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    return color;
 }

我怎么能这样做？

更新 - 如果我想一个接一个地使用3个班级，我该怎么做？

Answer 1

您必须运行一些JavaScript代码并相应地设置background-color属性。代码看起来像这样：

var table = document.getElementById( 'myTable' ),
    rows = table.getElementsByTagName( 'tr' );

for( var i=rows.length; i--; ) {
   rows[i].style.backgroundColor = GenerateColor();
}

Answer 2

您可以尝试使用jquery，

    function GenerateColor() {
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
        return color;
     }

    $(document).ready(function(e) {

        $("#ColorTable").css('backgroundColor', GenerateColor());

    });

HTML：

       <table>
            <tr id="ColorTable">
                  <th>Item Name</th>
                  <th>Quantity</th>
              </tr>
        </table>

简单随机类方法：

       var cssArray = new Array('Class1', 'Class2', 'Class3');

       $(document).ready(function(e) {

           var i = Math.floor((Math.random()*3)); 

           $("#ColorTable").addClass(cssArray[i]);
       });

CSS：

    .Class1{
        background-color:blue;
    }
    .Class2{
        background-color:red;
    }
    .Class3{
        background-color:green;
    }

每行应用的背景颜色：

       $(document).ready(function(e) {      

         $("#ColorTable  tr").each(function(){

            $(this).css('backgroundColor', GenerateColor());

         });

       });

Answer 3

您可以使用jquery来解决此问题。请参阅jsFiddle上的示例。

function generateColor() {
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    return color;
}

$('tr').each(function(i, item) {
    $(item).css('backgroundColor', generateColor());
});

Answer 4

jsiddle Demo

<table id='tableId'>    
    <tr><td>td1</td><td>td2</td></tr>
    <tr><td>td3</td><td>td4</td></tr>
</table>

window.onLoad = applyColors();
// Javascript in above line has following commented Jquery Alternate
/*$(document).ready(function(){    
    applyColors();
});*/

function applyColors()
{        
    var rowsdom = document.getElementById('tableId').getElementsByTagName('tr'); 
    // Javascript in above line has following commented Jquery Alternate    
    //var rowsjq = $('#tableId tr');
    var cnt = rowsdom.length;
    for(i=0;i<cnt;i++)
    {       
        var randomColor = GenerateColor();        
        rowsdom[i].style.backgroundColor = GenerateColor();
        // Javascript in above line has following commented Jquery Alternate
        //rowsjq.eq(i).css('background-color',randomColor);        
    }
}
function GenerateColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
 }

在标记中调用JavaScript函数

4 个答案:

jsiddle Demo