javascript创建随机表生成器并为单元格指定颜色

时间:2016-03-30 21:43:56

标签: javascript html

<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的倍数,则显示具有蓝色背景的单元格我无法弄清楚。

1 个答案:

答案 0 :(得分:0)

这是内循环:

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