Javascript 对动态生成的HTML表行应用不同的颜色_Javascript_Jquery_Html_Css

Javascript 对动态生成的HTML表行应用不同的颜色

javascript jquery html css

Javascript 对动态生成的HTML表行应用不同的颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经使用HTML和javascript创建了动态表，但我希望对每一行应用不同的颜色，而不是应用其他颜色。我怎样才能做到 <!DOCTYPE HTML> <html> <head> <title>Dynamic Page</title> </head> <body> <table> <tr>

我已经使用HTML和javascript创建了动态表，但我希望对每一行应用不同的颜色，而不是应用其他颜色。我怎样才能做到

<!DOCTYPE HTML>
<html>
    <head>
        <title>Dynamic Page</title>
    </head>


    <body>
        <table>
            <tr>
                <td>Enter Rows</td>
                <td><input type="number" id="txtRows"/></td>
            </tr>
            <tr>
                <td>Enter Columns</td>
                <td><input type="number" id="txtCols"/></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" id="btnDisplay" value="Display" onClick="createTable();"/></td>
            </tr>
        </table>
        <table id="tbl_DynamicTable" border="1">
        </table>
    </body>

    <script type="text/javascript">
        function createTable()
        {
          debugger;
            var rows = document.getElementById("txtRows").value;
            var cols = document.getElementById("txtCols").value;
            var table = document.getElementById("tbl_DynamicTable");
            var str="";
            for(var i=0;i<rows;i++)
            {
                str += "<tr id=row" + i +">";

                //r = document.getElementById('tbl_DynamicTable').getElementsByTagName('<tr>');
                //r.bgColor = colours[(i%k)/group | 0];

                //mycurrent_row.style.backgroundColor = "#EEF4EA";
                //mycurrent_row.style.backgroundColor =colours[(i%k)/group | 0];

                for(var j=0;j<cols;j++)
                {
                    if(i==0)
                    {
                        str += "<th> Header " + j + "</th>";
                    }
                    else
                    {
                        str += "<td> Row " + i + ", Cell "+ j + "</td>";
                    }
                }
                str += "</tr>";             
            }           
            table.innerHTML = str;
        }       


        $("tr").style("bgcolor","red");     
    </script>
</html>


动态页面
输入行
输入列
函数createTable（）
{
调试器；
var rows=document.getElementById（“txtRows”）.value；
var cols=document.getElementById（“txtCols”）.value；
var table=document.getElementById（“tbl_DynamicTable”）；
var str=“”；
对于（var i=0；ijavascript方法（我建议包括jQuery）：

函数get_random_color（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.round（Math.random（）*15）]；
}
返回颜色；
}
//在文档上绘制行已就绪
$（函数（）{
绘制行（）；
});
函数paint_rows（）{
$（'#table_id tr'）。每个（函数（）{
$（this.css（'color'，get_random_color（））；
});
}

只需确保在数组中添加足够的颜色值colors
（也可以使用十六进制值）
当然，您可以随时调用函数paint\u rows（）

希望能有所帮助。
你有很多方法来创建随机颜色
使用以下示例：
JAVASCRIPT
'#'+Math.floor(Math.random()*16777215).toString(16);

jQuery
(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
  s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)

并在生成TR时将此六边形随机颜色添加到TR上
HTML
<table border="1">
  <tr bgcolor="#FF0000">
                  ^ Here
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 


^这里
月
储蓄
一月
$100

上的其他示例首先向我们展示一些代码您在这里也有同样的问题。这不是您自己问的帮助吗？不，不会的，因为我需要更多细节，因为我是jQuery和Javascript的乞丐。但是我正在动态生成行，我不知道如何访问它的bgColor属性…当您编写str+=“”
，像这样添加属性bgcolor”；
其中RandomColor
是由“#”+Math.floor（Math.random（）*16777215）.toString（16）；
其显示错误：未捕获类型错误：对象函数（e，t）{返回新的x.fn.init（e，t，r）}没有方法“random”我对random没有错误：或者其他方法：你能在我的代码中编辑它让我知道这一点吗？如果可以的话。我如何将此函数应用于动态生成的行的bgColor属性？有什么想法吗？更改$（this.css（'color'，get_random_color（））；
到$（this.css）（'background'，get_random_color（））；
<table border="1">
  <tr bgcolor="#FF0000">
                  ^ Here
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>