如何使用javascript获取HTML表格单元格中的随机数

Question

我想在表格中的随机单元格中生成数字“ 1”。 有一个类似的游戏：在按下播放键后，您将通过按一个按钮来选择一张桌子。 当您按播放时，我想将数字“ 1”随机放入，但不是在所有单元格中都放入。 （例如：如果表是8x8，则在表中放入“ 1”的8，如果表是6x6，将表中的“ 1”放入6，以此类推...）我在html中创建了3个表，并用JavaScript的。 现在，我需要一些提示，你们的一些帮助。 谢谢！ 这是我的代码：

 //Variables var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); var button3 = document.getElementById('button3'); var backBtn = document.getElementById('back-btn'); var playBtn = document.getElementById('play-btn'); var sixTable = document.getElementById('sixXsix'); var eightTable = document.getElementById('eightXeight'); var steenTable = document.getElementById('steen'); //Visibility starter sixTable.style.display = 'none'; eightTable.style.display = 'none'; steenTable.style.display = 'none'; backBtn.style.display = 'none'; playBtn.style.display = 'none'; //Buttons function button1.onclick = function() { var six = document.getElementById('sixXsix'); var eight = document.getElementById('eightXeight'); var steen = document.getElementById('steen'); if (six.style.display === 'none') { six.style.display = 'block'; eight.style.display = 'none'; steen.style.display = 'none'; button1.style.display = 'none'; button2.style.display = 'none'; button3.style.display = 'none'; backBtn.style.display = 'block'; playBtn.style.display = 'block'; } } button2.onclick = function() { var six = document.getElementById('sixXsix'); var eight = document.getElementById('eightXeight'); var steen = document.getElementById('steen'); if (eight.style.display === 'none') { six.style.display = 'none'; eight.style.display = 'block'; steen.style.display = 'none'; button1.style.display = 'none'; button2.style.display = 'none'; button3.style.display = 'none'; backBtn.style.display = 'block'; playBtn.style.display = 'block'; } } button3.onclick = function() { var six = document.getElementById('sixXsix'); var eight = document.getElementById('eightXeight'); var steen = document.getElementById('steen'); if (steen.style.display === 'none') { six.style.display = 'none'; eight.style.display = 'none'; steen.style.display = 'block'; button1.style.display = 'none'; button2.style.display = 'none'; button3.style.display = 'none'; backBtn.style.display = 'block'; playBtn.style.display = 'block'; } } backBtn.onclick = function() { sixTable.style.display = 'none'; eightTable.style.display = 'none'; steenTable.style.display = 'none'; backBtn.style.display = 'none'; playBtn.style.display = 'none'; button1.style.display = 'block'; button2.style.display = 'block'; button3.style.display = 'block'; } playBtn.onclick = function() { } 

 <div id="buttons"> <button id="button1">6x6 Table</button> <button id="button2">8x8 Table</button> <button id="button3">16x16 Table</button> <button id="back-btn">Back</button> <button id="play-btn">Play</button> </div> <div id="table"> <div id="sixXsix"> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> <div id="eightXeight"> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> <div id="steen"> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </div> 

Answer 1

下面的代码使用jquery生成1到单元格数量之间的随机数，然后在对应的单元格中放置1。

如果不清楚，请告诉我。

希望这可以帮助。

 $('#playBtn').on('click', function() { var cellsCount = $('#table1 td').length; var rows = $('#table1 tr').length; var usedCells = []; if (rows != $("#table1 tr:first-child td").length) { alert("The grid is not a square, I dont know how many cells to mark."); return; } // empty all cells first $("#table1 td").empty(); $("#table1 td").css("background-color", "white"); // generate random numbers between 1 and the number of cells available // (no duplicates) while (usedCells.length < rows) { randCell = Math.floor(Math.random() * cellsCount); if (usedCells.indexOf(randCell) == -1) { usedCells.push(randCell); } } // for each number generate, color the cell and add the "1" $.each(usedCells, function(index, value) { cell = "#table1 td:eq(" + value + ")"; $(cell).html("1"); $(cell).css("background-color", "red"); }); }); 

 td { border: 1px solid black; height: 25px; width: 25px; text-align: center; background-color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <button id="playBtn">Play</button> <br> <table id="table1"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> 

Answer 2

该代码段使用模板方法（ interpolate ）创建一个nXn表，其中包含n个值为1的随机单元格。有关interpolate用法，请参见此git-repo 。

 (function () { String.prototype.interpolate = function (tokens) { return interpolate(this, tokens); }; document.querySelector("#buttons") .addEventListener('click', createTable); document.querySelector("#button1").click(); function createTable(evt) { const origin = evt.target; if ( !/button/i.test(origin.nodeName)) { return; } const size = origin.getAttribute('data-table') .split('x') .reduce(function (a, b, i) { i == 1 ? a.rows = +b : a.cols = +b; return a; }, {} ); size.totalCells = size.rows * size.cols; const fillCells = getUniqueRandomValues(size.cols, size.totalCells); let cellCount = 0; const rowCells = () => '<td{hasValue}>&nbsp;</td>' .interpolate( Array(size.rows).join(",").split(",") .map( () => { return { hasValue: fillCells.indexOf(cellCount++) > -1 ? " class=\\"hasValue\\"" : "" }; } ) ); const rows = '<tr>{cell}</tr>'.interpolate( Array(size.rows).join(",").split(",") .map( () => { return { cell: rowCells() }; } ) ); const header = ('<tr><td colspan="{colsize}" class="header">' + '{rowsize} rows, {colsize} columns</td><tr>') .interpolate({colsize: size.cols, rowsize: size.rows}); document.querySelector("#result").innerHTML = '<table>{rows}</table>' .interpolate( { rows: header + rows }); } function getUniqueRandomValues(nValues, maxRandomValue) { let existing = {}; maxRandomValue -= 1; const randomUnique = () => { const rndm = Math.floor(1 + Math.random() * maxRandomValue); const exists = existing[rndm]; if ( !exists ) { existing[rndm] = 1; } return exists ? randomUnique() : rndm; }; return Array(nValues).join(",").split(",") .map( () => randomUnique() ) ; } function interpolate(string2Interpolate, tokens) { if (!(tokens instanceof Array) && tokens instanceof Object) { tokens = [tokens]; } else if (!(tokens instanceof Object)) { return string2Interpolate; } let replacer = function (token) { return function (t, t1, t2) { return token[t2] === '' ? String.fromCharCode(0) : token[t2] || t; }; } let str = string2Interpolate; return tokens.map(function (token) { return str.replace(/(\\{?)([a-z_0-9]+)(\\})/gi, replacer(token)); }).join('').replace(RegExp(String.fromCharCode(0), "g"), ''); } }()); 

 body { font: 12px verdana, arial; } table { margin-top: 1em; } table td { text-align: right; border: 1px solid #c0c0c0; padding: 2px; min-width: 1.2em; min-height: 1.2em;} table td.header { background-color: black; color: white; text-align: center; } td.hasValue { background-color: green; color: white; } td.hasValue:before { content: "1"; } 

 <div id="buttons"> <button id="button1" data-table="6x6"> 6x6 Table </button> <button id="button2" data-table="8x8"> 8x8 Table </button> <button id="button3" data-table="16x16"> 16x16 Table </button> </div> <div id="result"></div>