<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Variables with Player Data-->
<script type="text/javascript">
//Player A
let PlayerAMS = 0
let PlayerATN = 0
// Player B
let PlayerBMS = 0
let PlayerBTN = 0
//Player C
let PlayerCMS = 0
let PlayerCTN = 0
//Player D
let PlayerDMS = 0
let PlayerDTN = 0
//Player E
let PlayerEMS = 0
let PlayerETN = 0
//Player F
let PlayerFMS = 0
let PlayerFTN = 0
//Player G
let PlayerGMS = 0
let PlayerGTN = 0
//Player H
let PlayerHMS = 0
let PlayerHTN = 0
//Player I
let PlayerIMS = 0
let PlayerITN = 0
//Player J
let PlayerJMS = 0
let PlayerJTN = 0
//Player K
let PlayerKMS = 0
let PlayerKTN = 0
//Player L
let PlayerLMS = 0
let PlayerLTN = 0
//Player M
let PlayerMMS = 0
let PlayerMTN = 0
//Player N
let PlayerNMS = 0
let PlayerNTN = 0
//Player O
let PlayerOMS = 0
let PlayerOTN = 0
//Player P
let PlayerPMS = 0
let PlayerPTN = 0
//Player Q
let PlayerQMS = 0
let PlayerQTN = 0
</script>
<table id="dataTable" border="1">
<!-- Headers -->
<tr>
<th>Player Number</th>
<th>Missed Serves</th>
<th>Touched Net</th>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
</table>
<button type="button" onclick="incrementAMS()">Increment Player 1 MS</button>
<button type="button" onclick="DecrementAMS()">Decrement Player 1 MS</button>
<button class="button" onclick="update()">Update</button>
<script type="text/javascript">
let array = [[PlayerAMS, PlayerATN],
[PlayerBMS, PlayerBTN],
[PlayerCMS, PlayerCTN],
[PlayerDMS, PlayerDTN],
[PlayerEMS, PlayerETN],
[PlayerFMS, PlayerFTN],
[PlayerGMS, PlayerGTN],
[PlayerHMS, PlayerHTN],
[PlayerIMS, PlayerITN],
[PlayerJMS, PlayerJTN],
[PlayerKMS, PlayerKTN],
[PlayerLMS, PlayerLTN],
[PlayerMMS, PlayerMTN],
[PlayerNMS, PlayerNTN],
[PlayerOMS, PlayerOTN],
[PlayerPMS, PlayerPTN],
[PlayerQMS, PlayerQTN],
]
console.log(array)
table = document.getElementById("dataTable");
function update() {
// rows
for (let i = 1; i < table.rows.length; i++) {
// cells
for (let j = 1; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].innerHTML = array[i][j - 1];
}
}
}
function incrementAMS(){
PlayerAMS++;
console.log(PlayerAMS);
}
function incrementATN(){
PlayerATN++;
console.log(PlayerATN);
}
function DecrementAMS(){
PlayerAMS--;
console.log(PlayerAMS);
}
function DecrementATN(){
PlayerATN--;
console.log(PlayerATN);
}
</script>
</body>
</html>
I am making a table where I can just press a button and a specific value inside a cell increases. And the function I have does do that, as evidenced by the value increasing when I check it in the console. However, I can't make it show up in the table, and the value in the cell just stays at 0. How can I make it so the value increases in real time, or after I hit the update button?
Array starts at zero.
table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
You're updating the PlayerAMS but the array value is being used for display. You can just change the index to update other players. You should also change decrement functions like this.
function incrementAMS(){
array[0][0]++;
console.log(array[0][0]);
update();
}
There are (at least) 2 problems with your code.
you are updating PlayerAMS. BUT in javascript the primitive types are not assigned as references, but by value. Meaning that your array is not an array of pointers to PlayerXXX, but an array of values copied at the time of creation. So you need to update array as well.
Your indexing is wrong for array (i)
I've modified your update function a bit using your own code style to get the functionality you probably want to get. However, I have to say that it is far from ideal at the moment. Keep working on it :)
function update() {
array = [[PlayerAMS, PlayerATN],
[PlayerBMS, PlayerBTN],
[PlayerCMS, PlayerCTN],
[PlayerDMS, PlayerDTN],
[PlayerEMS, PlayerETN],
[PlayerFMS, PlayerFTN],
[PlayerGMS, PlayerGTN],
[PlayerHMS, PlayerHTN],
[PlayerIMS, PlayerITN],
[PlayerJMS, PlayerJTN],
[PlayerKMS, PlayerKTN],
[PlayerLMS, PlayerLTN],
[PlayerMMS, PlayerMTN],
[PlayerNMS, PlayerNTN],
[PlayerOMS, PlayerOTN],
[PlayerPMS, PlayerPTN],
[PlayerQMS, PlayerQTN],
]
// rows
for (let i = 1; i < table.rows.length; i++) {
// cells
for (let j = 1; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
}
}
}
Related
I am trying to make a simple dieting calculator with my limited HTML, CSS, and JS knowledge. While I was partway through coding the Javascript (the third step for the user out of five), my third variable was returning as 0, when it should return as something else (~10-15) My logic works like this:
A user clicks a button from a group that specifies to them.
For the first function, st1 = (a number that specifies on which button is pressed)
Do note that at the start of the js, the variables are already declared (let st1 = 0; let st2 = 0; etc.)
For the second function, st2 = parseInt(st1) + (another number)
The same thing happens for the 3rd function
I have not finished the rest
I have tried console.log()ing st2 when the third step is called, and it returns as 0. Thanks for any help!
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="script.js"></script>
<table>
<tr>
<td>
<p id="step1">Step 1.</p>
</td>
<td>
Gender:
</td>
<td>
<table>
<tr>
<td>
<button onclick="Male()">Male</button>
</td>
</tr>
<tr>
<td>
<button onclick="Female()">Female</button>
</td>
</tr>
<tr>
<td>
<button onclick="Other()">Other/Prefer Not to say</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p id="step2">Step 2.</p>
</td>
<td>
Age:
</td>
<td>
<table>
<tr>
<td>
<button onclick="seventeen()">Between 17-26</button>
</td>
</tr>
<tr>
<td>
<button onclick="twentyseven()">Between 27-37</button>
</td>
</tr>
<tr>
<td>
<button onclick="thirtyeight()">Between 38-47</button>
</td>
</tr>
<tr>
<td>
<button onclick="fortyeight()">Between 48-57</button>
</td>
</tr>
<tr>
<td>
<button onclick="fiftyeight()">Over 58</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p id="step3">Step 3.</p>
</td>
<td>
Height
</td>
<td>
<table>
<tr>
<td>
<button onclick="under5()">Below 5ft</button>
</td>
</tr>
<tr>
<td>
<button onclick="btwn()">Between 5'0" - 5'9"</button>
</td>
</tr>
<tr>
<td>
<button onclick="over()">Over 5'10"</button>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
And here is the JS:
let st1 = 0;
let st2 = 0;
let st3 = 0;
//Start Group one, these three functions are each called when clicking a button with the user's gender
function Male() {
st1 = 8;
document.getElementById("step1").innerHTML = "Complete";
console.log(st1);
}
function Female() {
st1 = 2;
document.getElementById("step1").innerHTML = "Complete";
console.log(st1);
}
function Other() {
st1 = 4;
document.getElementById("step1").innerHTML = "Complete";
console.log(st1);
}
//End Group one
//Start group two, each of these are called when the user clicks a button with their age group.
function seventeen() {
let st2 = parseInt(st1) + 4;
document.getElementById("step2").innerHTML = "Complete";
console.log(st2)
}
function twentyseven() {
let st2 = parseInt(st1) + 3;
document.getElementById("step2").innerHTML = "Complete";
console.log(st2);
}
function thirtyeight() {
let st2 = parseInt(st1) + 2;
document.getElementById("step2").innerHTML = "Complete"
console.log(st2);
}
function fortyeight() {
let st2 = parseInt(st1) + 1;
document.getElementById("step2").innerHTML = "Complete"
console.log(st2);
}
function fiftyeight() {
let st2 = parseInt(st1) + 0;
document.getElementById("step2").innerHTML = "Complete"
console.log(st2)
}
//End group 2
//Start Group 3, The user clicks a button with their height range.
function under5() {
let st3 = st2 + 0;
document.getElementById("step3").innerHTML = "Complete";
console.log(st3);
}
function btwn() {
let st3 = parseInt(st2) + 1;
document.getElementById("step3").innerHTML = "Complete";
console.log(st3);
}
function over() {
let st3 = parseInt(st2) + 2 ;
document.getElementById("step3").innerHTML = "Complete";
console.log(st3);
}
//End group 3
//There are two more groups I haven't finished coding, so won't include here.
when you put the keyword let before the variable, it gets redeclared. try removing the lets from the functions.
also, you could do something like this, though there are even better ways...
<button onclick="gender(8)">Male</button>
<button onclick="gender(2)">Female</button>
function gender( value ) {
std1 = value;
}
I am trying to generate a random name with a click of a button and then have that random name be inserted into a HTML table that looks a little something like this:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<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>
<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>
</body>
</html>
What I am trying to do is with a click of a button var round1 will randomly pick a name from var round1names and will insert it into the Cell 1,1, then randomly pick from the remaining names and insert that name into Cell 1,2... and do this until there is only 1 name left that will be inserted into Cell 1,6 of the Table, all in a click of a button, here is my JS Code so far:
function myFunction()
{
var round1names = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
var round1 = round1names[Math.floor(Math.random()*round1names.length)];
}
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Click me</button>
</body>
</html>
Here's what I came up with on jsFiddle:
var x = 0, //starting column Index
cells = document.getElementsByTagName('td')
names = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
function myFunction(namesArray)
{
var round1names = namesArray.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);
}
}
(https://jsfiddle.net/vuehc4n2/3/)
and then on the button's onclick, pass in the array of names:
<button type="button" onclick="myFunction(names)">Click me</button>
I've moved the names array outside of the function and then pass it in to myFunction. The function creates a copy of the array and then randomly inserts a name from that array into the table column. If there were more than 6 names, it would automatically wrap to the next row below. Then, it removes the name from the array copy. Once all the names are gone/used, the function is complete.
Creating the copy of the array will allow you to click the button multiple times.
Hope this helps!
Here is my solution.Everytime you click the button, it will select random from the list. The selected value wont be selected the next time you click it. It loops until the list is empty.
$('#document').ready(function(){
var round1names = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
var arr = $('#table1 > tbody > tr').map(function ()
{
return $(this).children().map(function ()
{
return $(this);
});
});
var row = 0;
var col = 1 ;
$('#button').click(function(){
var valueAdded = false;
var isListEmpty = false;
if(round1names.length <1){
isListEmpty = true;
}
if(!isListEmpty){
while(!valueAdded){
var index = Math.floor((Math.random() * round1names.length));
if(round1names[index] !=null){
arr[col][row].text(round1names[index]);
valueAdded = true;
round1names.splice(index,1);
row++;
}
}
}else{
alert("list is empty")
}
})
})
Here is the fiddle
https://jsfiddle.net/qtgqsmkz/2/
Hello Im trying to create a searchbar for my table with javascript and works but with some issues. The problem is when I try to search in two rows. For example if I only search in Name works! but if I search Name and Last Name doesn't work.
Here is my js function
var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function() {
buscar(this);
}
function buscar(inputbuscar) {
var valorabuscar = (inputbuscar.value).toLowerCase().trim();
var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
for (var i = 0; i < tabla_tr.length; i++) {
var tr = tabla_tr[i];
var textotr = (tr.innerText).toLowerCase();
tr.className = (textotr.indexOf(valorabuscar) >= 0) ? "mostrar" : "ocultar";
}
}
Here is a runnable copy:
var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function(){
buscar(this);
}
function buscar(inputbuscar){
var valorabuscar = (inputbuscar.value).toLowerCase().trim();
var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
for(var i=0; i<tabla_tr.length; i++){
var tr = tabla_tr[i];
var textotr = (tr.innerText).toLowerCase();
tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
}
}
.mostar{display:block;}
.ocultar{display:none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<linl rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header">
My Table
</h1>
<!-- TABLA INICIA -->
<table id="tabla" class="table table-striped">
<thead>
<tr>
<th style="width:160px">Nombre</th>
<th>Apellido</th>
<th style="width:220px">Profesion</th>
<th style="width:140px">Sueldo</th>
</tr>
<tr>
<td colspan="4">
<input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Perez Patiño</td>
<td>Marketing Empresarial</td>
<td class="text-right">S/. 9000.00</td>
</tr>
<tr>
<td>Alberto</td>
<td>Gonzales Flores</td>
<td>Derecho</td>
<td class="text-right">S/. 4000.00</td>
</tr>
<tr>
<td>Gustavo</td>
<td>Bueno Bravo</td>
<td>Derecho</td>
<td class="text-right">S/. 7000.00</td>
</tr>
<tr>
<td>Enrique</td>
<td>Pacheco Perez</td>
<td>Derecho</td>
<td class="text-right">S/. 12000.00</td>
</tr>
<tr>
<td>Jaime</td>
<td>Andrade Gonzales</td>
<td>Economia</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Andrea</td>
<td>Loayza Perez</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Elvira</td>
<td>Gonzales Perez</td>
<td>Ingeniería de Sistema</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Joseph</td>
<td>Rodriguez Pacheco</td>
<td>Ingeniería de Software</td>
<td class="text-right">S/. 8200.00</td>
</tr>
<tr>
<td>Pedro</td>
<td>kuczynski</td>
<td>Economista</td>
<td class="text-right">S/. 250000.00</td>
</tr>
<tr>
<td>Alan</td>
<td>García Perez</td>
<td>Derecho</td>
<td class="text-right">S/. 120000.00</td>
</tr>
<tr>
<td>Jose</td>
<td>Villanueva Salvador</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 2900.00</td>
</tr>
<tr>
<td>Alberto</td>
<td>Lozano García</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 2900.00</td>
</tr>
</tbody>
</table>
<!-- TABLA FINALIZA -->
</div>
</div>
</div>
A demo at jsFiddle to play with.
To give you a headstart, I modified your function a little bit. This still doesn't work the way you want, but it should guide you with an idea:
function buscar(inputbuscar){
var valorabuscar = (inputbuscar.value).toLowerCase().trim();
var arraydevalores = valorabuscar.split(" ");
console.log(arraydevalores); //CHECK WHAT THIS LOGS
var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
console.log(findOne(arraydevalores, tabla_tr));
for(var i=0; i<tabla_tr.length; i++){
var tr = tabla_tr[i];
var textotr = (tr.innerText).toLowerCase();
tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
}
}
I split your valorabuscar variable where any spaces are, so now you have an array of the terms that the user is searching for sepparately in an array that looks like this:
["juan", "pérez", "patiño"]
This array is easier to manipulate so as to compare it with your table and return whatever's more similar to it. Good luck!
PS: Here's an appropriate question to help you continue: Check if an array contains any element of another array in JavaScript
<img> element is always empty. I've tried creating different loops and using other methods, but nothing seems to fix the error. Any ideas?
<script type="text/javascript">
var cards = new Array();
for(i = 0; i > 11; i++) {
cards[i] = new Image();
cards[i].src = "imgs/CardBack.jpg";
document.theImage.src == cards[i].src;
}
</script>
</head>
<body>
<table border="1" width="200px" height="400px">
<tr>
<td><img name="theImage"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
in order to access src attribute of "theImage", I suggest you document.getElementsByName('theImage')[0].setAttribute('src', cards[i].src);.
Edit : Complete solution after bug tracking here : https://jsfiddle.net/oqbkhb64/2/
Cheers
Code has a few errors, try the following
var cards = new Array();
for (var i = 0; i < 11; i++) {
cards[i] = new Image();
cards[i].src = "imgs/CardBack.jpg"
document.theImage.src = cards[i].src;
}
Hope it works
You can use getelementsByTagName() method to get all the <td> elements, and then in a loop create an image and assign it to each td:
HTML:
<table border="1" width="200px" height="400px" id="myTable">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Javascript:
var table = document.getElementById("myTable");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var img=document.createElement("img");
img.src="imgs/CardBack.jpg";
cells[i].appendChild(img);
}
This is a DEMO Fiddle.
I am trying to get the following code to get variable round2players to be randomly assigned to the 2nd row in the table, here is my code so far:
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);
}
}
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>
Group your arrays in another array. Now you have an array of arrays or multidimensional array. Multidimensional arrays are great for tables. Renamed the arrays because I hate typing long names. Details are commented in Snippet.
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 & 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>