Question

我正在努力让它发挥作用，因为这是我第一次尝试自己做点什么。

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

例如：david，jan，mark

上面的每个名字都需要添加到一个新的行中，随机选择，在彼此之下

希望这是有道理的。

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

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

Answer 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()已为您设置的方法。

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

随机选择输入的输入，添加到表格中

1 个答案: