随机选择输入，添加到表中答案

【问题标题】：randomly choose input entered, add to table随机选择输入，添加到表中
【发布时间】：2018-02-04 10:16:19
【问题描述】：

我正在努力让它发挥作用，因为这是我第一次尝试自己制作东西。

我想从表单内的输入字段中获取输入，单击提交按钮，然后在每一行上，我想在表格中添加一个新的输入[type='text']。

例如：大卫、詹、马克

以上每个名称都需要单独添加到新行中，随机选择，彼此下方

希望这是有道理的。

在下面的示例中，它将输入彼此相邻添加。

// when the page is loaded
// hiding the table in the DOM = document object model
$(document).ready(function() {
  $('.table').hide();
});

// Get input from 'inputNames' text area
$('#button').click(function() {
  var name = $('input[type="text"]').val().split(',');

  // checking to see if the "input[type='text']" value is empty
  if ($('#inputNames').val() !== '') {

    // iterate over de names
    $('#inputNames').each(function() {
      for (var i = 0; i < name.length; i++) {
        name[i];
        //Create a new td add to tr
        $('.inserted').append('<td>' + name[i] + '</td>');
      }
    });


    // log the variable name to see the object
    console.log(name);

    // slide in the table
    $('.table').fadeIn(2500);

    // without it wont load the fadeIn effect
    return false;

  } else {
    alert('You need to fill in the input field');
  };
});

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title>Roulatie Schema</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

  <div class="container">
    <div class="jumbotron">
      <h1>Roulatie Schema</h1>
      <p class="lead">Gewoon een simpel roulatie schema, waarbij alleen de namen van de betreffende mensen hoeft te worden ingevuld</p>
      <hr class="my-4">
      <form id="myForm">
        <div class="form-group">
          <label for="inputNames">Fill in the names separated by a comma</label>
          <input type="text" class="form-control" id="inputNames" required='true' aria-describedby="emailHelp" placeholder="Example name, name">
          <small id="emailHelp" class="form-text text-muted">the field above can not be empty!!</small>
        </div>
        <button id="button" type="submit" class="btn btn-primary btn-lg">Submit</button>
    </div>
    <table class="table" align='center'>
      <thead class="thead-dark">
        <tr>
          <th>#Rounds</th>
          <th>#First Round</th>
          <th>#Second Round</th>
          <th>#Third Round</th>
        </tr>
      </thead>
      <tbody>
        <tr class="inserted">
          <td>Luxe lades</td>
        </tr>
        <tr class="inserted">
          <td>Meta lades</td>
        </tr>
        <tr class="inserted">
          <td>Inpak</td>
        </tr>
        <tr class="inserted">
          <td>Controle 100%</td>
        </tr>
        <tr class="inserted">
          <td>Lades inhangen</td>
        </tr>
        <tr class="inserted">
          <td>Deuren</td>
        </tr>
        <tr class="inserted">
          <td>Planken</td>
        </tr>
        <tr class="inserted">
          <td>Panelen</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

【问题讨论】：

你也可以张贴html表单吗？
按钮在哪里？还要在负载处理程序中分配点击
@CodeAt30，添加了html表单

标签： javascript jquery html

【解决方案1】：

好的，所以这个答案有两个步骤，希望我能正确理解你想要做什么。

第 1 步：

您当前正在正确地获取名称，但不是将它们添加到新行中的表格中，而是将它们作为单元格添加到每一行。所以改变 append() 内容可以解决这个问题：

$('#inputNames').each(function() {
    for (var i = 0; i < name.length; i++) {
        name[i];
        $('tbody').append('<tr class="inserted"><td>' + name[i] + '</td></tr>');
    }
});

第 2 步：

现在您希望随机添加它们。有很多方法可以解决这个问题，但我只提供一种，在代码中实际上是在第一步之前：随机化名称数组。

怎么样？简单：

var name = $('input[type="text"]').val().split(',');
name.sort(function(a, b){return 0.5 - Math.random()});

注意不要设置name=name.sort()，方法已经为你设置好了。

现在代码获取名称，将它们随机化，并将它们作为新行附加到表中。

【讨论】：

这正是我要找的，我可以从这里开始谢谢