Inserting Random Values into a Table JS

Question

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>

So what's the issue? Are you stuck on inserting the data into the table or getting the other random names? — George
– George, Commented Dec 14, 2016 at 15:37
Both I guess... But the focus is mainly inserting the data into the table. — ChippeRockTheMurph
– ChippeRockTheMurph, Commented Dec 14, 2016 at 15:42

jypweb · Accepted Answer · 2016-12-14 16:16:57Z

2

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!

answered Dec 14, 2016 at 16:16

jypweb

465 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ChippeRockTheMurph Over a year ago

How do I add a new set of names that will be randomly assigned on the 2nd row?

jypweb Over a year ago

If you have a second array (names2 = ["name", "name", "name"]), you can pass that into myFunction with myFunction(names2). Then you can either have a second button or create a different function that chooses the next array if the first one is already used.

jypweb Over a year ago

jsfiddle.net/vuehc4n2/6 I really quickly through this together. It works, but you'll have to get more complicated if you have a bunch of arrays that you want to choose from.

MSH · Accepted Answer · 2016-12-14 17:15:59Z

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/

Collectives™ on Stack Overflow

Inserting Random Values into a Table JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related