javascript - 在标签中调用 JavaScript 函数

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 演示

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