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

Call JavaScript function in <tr> tag

本文关键字：JavaScript 调用 函数 tr 标签      更新时间：2023-09-26

我正在尝试为<table>中的每个<tr>生成随机颜色，如下所示-

  <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个类，我该怎么做？

您必须运行一些 JavaScript 代码并相应地设置 background-color 属性。代码可能如下所示：

var table = document.getElementById( 'myTable' ),
    rows = table.getElementsByTagName( 'tr' );
for( var i=rows.length; i--; ) {
   rows[i].style.backgroundColor = GenerateColor();
}

你能试试这个吗，使用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());
         });
       });

你可以使用 jquery 来解决这个问题。请参阅jsFiddle上的示例。

function generateColor() {
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    return color;
}
$('tr').each(function(i, item) {
    $(item).css('backgroundColor', generateColor());
});

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);
 }
相关文章：