1
我創建了一些代碼，從文本框中輸入的東西列表中隨機選擇一個東西，我也已經能夠獲得代碼進入它的代碼表格的第一個單元格，我現在想要做的是分配所有的在文本框中輸入到行的每個單元的東西，這裏是我的代碼：按行隨機分配值進入到一個文本框
\t var rnd = function() {
\t \t var loader, things;
\t \t loader = document.getElementById('ajax-loader');
\t \t loader.style.display = 'inline';
\t \t things = document.getElementById('things').value;
\t \t things = things.replace(', ', ',');
\t \t things = things.split(',');
\t \t setTimeout(function() {
\t \t \t var thing;
\t \t \t loader.style.display = 'none';
\t \t \t thing = Math.floor(Math.random() * things.length);
\t \t \t document.getElementById('result').innerHTML = things[thing];
\t \t }, 500);
\t };
\t
\t // a little functionality for erin foley...
\t // save the things the user entered
\t document.getElementById('things').addEventListener('blur', function (evt) {
\t \t window.localStorage['things-to-be-picked'] = this.value
\t })
\t // use the user’s saved things
\t document.addEventListener('DOMContentLoaded', function (evt) {
\t \t var things = window.localStorage['things-to-be-picked']
\t \t if (things) {
\t \t \t document.getElementById('things').value = things
\t \t }
\t })\t fieldset input {
\t \t display: block;
\t }
\t #result {
\t \t border: solid 1px black;
\t \t background: #e0e0e0;
\t \t padding: 1em;
\t \t margin: 1em 0;
\t }
\t #ajax-loader {
\t \t display: none;
\t \t margin-bottom: -4px;
\t }
\t table {
\t \t \t font-family: arial, sans-serif;
\t \t \t border-collapse: collapse;
\t \t \t width: 75%;
\t }
\t td,
\t th {
\t \t \t border: 1px solid #dddddd;
\t \t \t text-align: left;
\t \t \t padding: 8px;
\t \t \t text-align: center
\t }
\t tr:nth-child(even) {
\t \t \t background-color: #dddddd;
\t }<!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>
\t <form method="get" action="/" onsubmit="return false;">
\t \t <fieldset>
\t \t \t <label>
\t \t \t \t <textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
\t \t \t </label>
\t \t </fieldset>
\t \t <p>
\t \t \t <input type="button" value="Pick one!" onclick="rnd();">
\t \t \t <img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
\t \t </p>
\t </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>
是否有可能與按鈕的點擊模擬它使該行中每個單元都有不同的名字？ – ChippeRockTheMurph
如果你不想重複一個名字，那麼你可以從東西數組中刪除這個名字。下次更新的東西數組將被用來選擇一個隨機的名字。 – Deep