1
Ich habe ein wenig Code erstellt, der zufällig ein Objekt aus einer Liste eingegebener Objekte in einem Textfeld auswählt. Ich konnte den Code auch eingeben die erste Zelle einer Tabelle, was ich will jetzt all die Dinge tun zuweisen in der Textbox in jeder Zelle der Reihe, hier ist mein Code eingegeben ist:Zufälliges Zuweisen von Werten Zeile für Zeile, die in ein Textfeld eingegeben wurden
\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>EDIT: Obwohl ein Fehler angezeigt wird, funktioniert das Snippet immer noch.
Hier ist ein Code, der tut genau das, was ich das obige Snippet tun möchte:
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>
Ist es möglich, mit dem Klick auf die Schaltfläche es so simulieren, dass jede Zelle in dieser Zeile einen anderen Namen bekommt? – ChippeRockTheMurph
Wenn Sie einen Namen nicht wiederholen möchten, können Sie diesen Namen aus dem Array diens entfernen. Beim nächsten Mal wird das Array der aktualisierten Objekte verwendet, um einen zufälligen Namen auszuwählen. – Deep