我想制作应用程序 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!");
});
});
如上图所示,值在重复。如何使从玩家 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"> </td>
<td class="normal" id="cell01"> </td>
<td class="normal" id="cell02"> </td>
<td class="red" id="cell03"> </td>
</tr>
<tr>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="normal" id="cell12"> </td>
<td class="red" id="cell13"> </td>
</tr>
<tr>
<td class="normal" id="cell20"> </td>
<td class="normal" id="cell21"> </td>
<td class="normal" id="cell22"> </td>
<td class="red" id="cell23"> </td>
</tr>
<tr>
<td class="normal" id="cell30"> </td>
<td class="normal" id="cell31"> </td>
<td class="normal" id="cell32"> </td>
<td class="red" id="cell33"> </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
关于javascript - 如何在 JavaScript 中用随机值填充生成的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56675905/