我在这里有一些代码，只需点击一个按钮就可以从输入到文本框中的值列表中随机选择，我已设法操作它，以便将随机生成的值输入到表格的第一个单元格中，但我想知道是否可以通过单击按钮随机为一行中的每个单元格分配不同的值？这是我的代码：
var rnd = function () {
var loader, things;
loader = document.getElementById('ajax-loader');
loader.style.display = 'inline';
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function () {
var thing;
loader.style.display = 'none';
thing = Math.floor(Math.random() * things.length);
document.getElementById('result').innerHTML = things[thing];
}, 500);
};
// a little functionality for erin foley...
// save the things the user entered
document.getElementById('things').addEventListener('blur', function ( evt ) {
window.localStorage['things-to-be-picked'] = this.value
})
// use the user’s saved things
document.addEventListener('DOMContentLoaded', function ( evt ) {
var things = window.localStorage['things-to-be-picked']
if ( things ) {
document.getElementById('things').value = things
}
}) fieldset input {
display: block;
}
#result {
border: solid 1px black;
background: #e0e0e0;
padding: 1em;
margin: 1em 0;
}
#ajax-loader {
display: none;
margin-bottom: -4px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}<!DOCTYPE html>
<html>
<body>
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
<img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
</p>
</form>
</td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
编辑：即使错误显示代码段仍然有效。
以下是一些完全符合上述代码段要求的代码：
var round1 = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
var round2 = ['Cyril Willard', 'Gale Frank', 'Aveline Derricks', 'Darcey Bullock', 'Jaiden Deering', 'Glenn Benn'];
var round3 = ['George Washington', 'John Adams', 'Tom Jefferson', 'James Madison', 'James Monroe', 'John Quincy Adams'];
/* game is a multidimensional array.
| Each element is an array(sub-array).
| Each sub-array is a row in a table.
| Each element of a sub-array is a cell.
*/
var game = [round1, round2, round3];
// count will be incremented per click of button
var count = 0;
function rounds(n, obj) {
// Determine which sub-array to use
var array = obj[n - 1];
// Determine the specific <tr>
var row = 'tr:nth-of-type(' + n + ')';
// Reference each <td> cell of the <tr> row
var cells = document.querySelectorAll('tbody ' + row + ' td');
// Cell count
var x = 0;
// Separate each element of sub-array
array = array.slice(0);
// while loop establishes limits and iteration
while (array.length > 0 && x < cells.length) {
// Get a randomly generated number
var randomIndex = Math.floor(Math.random() * array.length);
/* On each iteration...
| ...insert the element of sub-array...
| ...that was determined by a randomly...
| ...generated index number.
*/
cells[x].innerHTML = array[randomIndex];
// Increment cell count
x++;
// Join all of the cells together in it's new order
array.splice(randomIndex, 1);
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
} <!DOCTYPE html>
<html>
<body>
<table id="example" class="display" align=center>
<thead>
<tr>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
<div style="padding:25px" align=center>
<!-- This button's attribute event has a incremental counter, so each successive click will change the count parameter -->
<button type="button" onclick="count++;rounds(count, game)">Simulate to next round</button>
</div>
</body>
</html>
答案 0 :(得分：2)
@ChippeRockTheMurph
看起来您问题的核心是：＆＃34;只需单击一个按钮就可以为一行中的每个单元格随机分配一个不同的值？＆＃34;
这不应该太难，但是在你遇到问题的那一刻你写的方式就是这样。注意：
document.getElementById（＆＃39; result＆＃39;）。innerHTML = things [thing];
然而，你的每个人都有一个带有id＆＃34;结果＆＃34;的div。 getElementById（）只返回一个元素（理论上，整个文档中只有一个元素应该有一个特定的id值）。
你可能会做得更好：
var list = document.querySelectorAll('.js-result');
然而，不使用id会更好，所以你的HTML就像
var rnd = function () {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function () {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
list.item(index).innerHTML = things[thing];
}
}, 500);
};
然后你可以做类似的事情：
fieldset input {
display: block;
}
.result {
border: solid 1px black;
background: #e0e0e0;
padding: 1em;
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}哪个更干净。
这是一个有效的例子：
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
</tr>
</tbody>
</table>fileWrite.write('\n'.join(participants2))
readlines
这有帮助吗？