在中调用JavaScript函数 <tr> 标签

Question

I am trying to generate random color for each <tr> in my <table> as like--

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

How i can do that?

UPDATE- if i want to use 3 class one after another, how can i do that?

Answer 1

You have to run some JavaScript code and set the background-color property accordingly. The code could look something like this:

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

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

Answer 2

Can you try this, Using 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>

Simple Random class method:

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

background color applied for every rows:

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

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

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

         });

       });

Answer 3

You can use jquery to solve this problem. See an example on 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);
 }