Question

我正在尝试使用以下代码将变量round2players随机分配到表中的第二行，这是我目前的代码：

＆＃13;

var x = 0, //starting column Index
    cells = document.getElementsByTagName('td')
    round1players = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
    round2players = ['Cyril Willard', 'Gale Frank', 'Aveline Derricks', 'Darcey Bullock', 'Jaiden Deering', 'Glenn Benn'];
    
function myFunction(round1playersArray)
{
	var round1names = round1playersArray.slice(0);
	while (round1names.length > 0 && x < cells.length) {
    var randomIndex = Math.floor(Math.random()*round1names.length);
    cells[x].innerHTML = round1names[randomIndex];
    x++;
    round1names.splice(randomIndex, 1);
  }
}

＆＃13;

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;
}

＆＃13;

     <!DOCTYPE html>
         <html>
         <body>
<table align=center>
<tr>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Ex-Tm #1</th>
<th>Ex-Tm #2</th>
<th>Gryphons</th>
</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 style="padding:25px" align=center>
<button type="button" onclick="myFunction(round1players)">Simulate to next round</button>
</div>
     </body>
            </html>

＆＃13;

Answer 1

将数组分组到另一个数组中。现在你有一个数组或多维数组。多维数组非常适合表格。重命名数组，因为我讨厌输入长名称。详细信息在Snippet中进行了评论。

<强>段

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'];
/* 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];
// 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 each cell 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 align=center>
    <thead>
      <tr>
        <th>Black</th>
        <th>Blue</th>
        <th>B &amp; B</th>
        <th>Ex-Tm #1</th>
        <th>Ex-Tm #2</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>

将数组移动到表中的下一行

1 个答案: