Question

我试图通过单击按钮生成一个随机名称，然后将该随机名称插入到一个看起来像这样的HTML表中：

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>

我要做的是点击按钮var round1将随机从var round1names中选择一个名称并将其插入到单元格1,1中，然后从其余名称中随机选择并将该名称插入单元格1,2 ...并执行此操作直到只剩下一个名称将插入表格的单元格1,6，只需点击一下按钮，这是我的JS代码到目前为止：

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>

Answer 1

以下是我在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/）

然后在按钮的onclick上，传入名称数组：

<button type="button" onclick="myFunction(names)">Click me</button>

我已将名字数组移到函数外部，然后将其传递给myFunction。该函数创建数组的副本，然后将该数组中的名称随机插入表列。如果有超过6个名称，它将自动换行到下面的下一行。然后，它从数组副本中删除名称。一旦所有名称都消失/使用，该功能就完成了。

创建数组副本将允许您多次单击该按钮。

希望这有帮助！

Answer 2

这是我的解决方案。每次点击按钮，它都会从列表中随机选择。下次单击时，不会选择所选值。它循环直到列表为空。

$('#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")
}

    })
 })

这是小提琴 https://jsfiddle.net/qtgqsmkz/2/

将随机值插入表JS

2 个答案: