移動陣列到下一行的表

我試圖讓下面的代碼獲取變量round2players被隨機分配到表中的第2行，這裏是到目前爲止我的代碼：移動陣列到下一行的表

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) 
 
{ 
 
\t var round1names = round1playersArray.slice(0); 
 
\t 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); 
 
    } 
 
}

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

來源

2016-12-14 ChippeRockTheMurph

_ 「我試圖讓下面的代碼獲取變量'round2players'被隨機分配到表中的第2行」 _'myFunction的'不會在'javascript'處使用'round2playersArray'作爲參數調用。 – guest271314

您需要將第二個數組傳入函數。而不是得到所有的TD，我會得到tr。使用tr可以確定是偶數還是奇數，並循環播放，而使用round1players或round2players填充行。 – user2242618

將數組分組在另一個數組中。現在你有一個數組或多維數組。多維數組非常適合表格。重新命名陣列，因爲我討厭輸入長名稱。詳細信息在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>

來源

2016-12-14 23:58:43 zer00ne

移動陣列到下一行的表

回答

相關問題