JavaScript 创建一个随机表生成器并为单元格分配颜色

javascript to create a random table generator and assign color to cells

本文关键字：单元格 颜色 分配 创建 随机 一个 JavaScript      更新时间：2023-10-19
<script type="text/javascript">
    function createTable()
    {
        var num_rows = document.getElementById('rows').value;
        var num_cols = document.getElementById('rows').value;
        var theader = '<table border="">'n';
        var tbody = '';
        var randomNumber = function (min, max)
        {
            return Math.floor (Math.random() * (max - min + 1)) + min;
        }
        for( var i=0; i<num_rows;i++)
        {
            tbody += '<tr>';
            for( var j=0; j<num_rows;j++)
            {
                tbody += '<td>';
                tbody += ' ' + randomNumber(1,100)  ;
                tbody += '</td>'
            }
            tbody += '</tr>'n';
        }
        var tfooter = '</table>';
        document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    }
</script>
</head>
<body>
<form name="tablegen">
    <label>Rows: <input type="text" name="rows" id="rows"/></label><br />
    <input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>

这是我的代码。它从用户输入创建表并随机生成一个数字，但现在我正在尝试弄清楚如何创建数组，您将遍历它，如果数字是 3 的倍数，则显示带有红色背景色;如果不是 3 的倍数而是 2 的倍数，则显示蓝色背景的单元格 我无法弄清楚。

这是内部循环：

for( var i=0; i<num_rows;i++)
{
    tbody += '<tr>';
    for( var j=0; j<num_rows;j++)
    {
        var ranNum = randomNumber(1,100);
        var color;
        if(ranNum % 3 == 0) {
            color = 'red';
        } else if(ranNum % 2 == 0) {
            color = 'blue';
        } else {
            color = 'white';
        }
        tbody += '<td style="background-color:' + color + '">';
        tbody += ' ' + ranNum;
        tbody += '</td>'
    }
    tbody += '</tr>'n';
}
相关文章：