如何在 JavaScript 中用随机值填充生成的表答案

【问题标题】：How to fill generated table with random values in JavaScript如何在 JavaScript 中用随机值填充生成的表
【发布时间】：2019-11-02 16:18:43
【问题描述】：

我想制作应用程序teamaker，选择你需要多少球员和球队，然后点击按钮，应用程序将生成一个随机值的表格，范围从玩家1 - 输入PlayersNum的值。我最大的问题是表格正在填充，但列具有相同的值。我该怎么办？

  <div class="wrapper">
        <h1 class="content__header">Let's create some teams!</h1>

        <form action="#" class="form">
            <label for="playersNum">
                Number of players <input type="number" id="playersNum" class="form__input">
            </label>

            <label for="teamsNum">
                Number of teams <input type="number" id="teamsNum" class="form__input">
            </label>

            <input type="submit" value="Draw teams" class="form__submit">
        </form>
</div>

document.addEventListener('DOMContentLoaded',function(){
const form = document.querySelector(".form");

form.addEventListener("submit", function(e){
    e.preventDefault();

        let teamsNum = document.getElementById("teamsNum").value;
            let playersNum = document.getElementById("playersNum").value;

        if(playersNum %teamsNum == 0){
            const wrapper = document.querySelector(".wrapper");
            const tbl = document.createElement("table");
            const tblBody = document.createElement("tbody");

            for (let i = 0; i < playersNum/teamsNum; i++) {
            let row = document.createElement("tr");

            for (let j = 0; j < teamsNum; j++) {
                let cell = document.createElement("td");
                let random = Math.floor(Math.random() * playersNum + 1);
                let cellText = document.createTextNode("Player " + random);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            tblBody.appendChild(row);
            }

            tbl.appendChild(tblBody);
            wrapper.appendChild(tbl);
            tbl.setAttribute("border", "2");
            tbl.style.margin = "20px auto";
            tbl.style.width = "50%";
            tbl.style.textAlign = "center";

        } else alert("Teams must have the same number of players!");
});

});

Repeating values

如上图所示，值是重复的。如何使每个值在从玩家 1 到我们在输入中写入的值的范围内不重复。

【问题讨论】：

标签： javascript html css random

【解决方案1】：

你可以试试这样的。

HTML

<center>
    <div id="container">
        <div id="header">
             <h1>Welcome</h1> 
        </div>
        <div id="content">
            <table border="1" id="lotto">
                <tbody>
                    <tr>
                        <td class="normal" id="cell00">&nbsp;</td>
                        <td class="normal" id="cell01">&nbsp;</td>
                        <td class="normal" id="cell02">&nbsp;</td>
                        <td class="red" id="cell03">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell10">&nbsp;</td>
                        <td class="normal" id="cell11">&nbsp;</td>
                        <td class="normal" id="cell12">&nbsp;</td>
                        <td class="red" id="cell13">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell20">&nbsp;</td>
                        <td class="normal" id="cell21">&nbsp;</td>
                        <td class="normal" id="cell22">&nbsp;</td>
                        <td class="red" id="cell23">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell30">&nbsp;</td>
                        <td class="normal" id="cell31">&nbsp;</td>
                        <td class="normal" id="cell32">&nbsp;</td>
                        <td class="red" id="cell33">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <input id="btn" type="button" value="Re-generate Numbers" />
</center>

JavaScript

var btn = document.getElementById('btn');

btn.addEventListener('click', UpdateTable);


// Set the max length of random number 
// and the max length
var maxLength = 4;

// Returns a random number
function CreateLottoValues() {
    return Math.floor(Math.random() * 4 + 1);
}

//create table
function UpdateTable() {

    for (var i = 0; i < maxLength; i++) {
        for (var j = 0; j < maxLength; j++) {
            tmp = 'cell' + i + j;
            document.getElementById(tmp).innerHTML = CreateLottoValues();
        }
    }
}

UpdateTable();

看看这个JSFiddle

【讨论】：

没问题，但我正在寻找可以选择我的表有多少列和行的代码。我可以选择行数、列数，然后生成具有随机值且不重复的表。