javascript - 如何将表单中的数据正确插入到表中

Question

您好，我想将表单中的给定数据放入我的表中，但数据始终在 ID 下:/

在我的表单中，我可以输入姓名、生日和地点，这应该存储在表中。 ID应该以1开头。 我不确定如何实现。

我希望有人能帮助我。

Answer 1

您已经引用了 jQuery 并部分使用了它，因此您也可以在其余部分使用 jQuery，您可以制作一个行模板并将值映射到它，然后再将其附加到表中，类似于下面的内容.

您可以添加更多抽象并将每组值转换为您传递的艺术家对象，但为了接近您的示例，我只做了最小的更改。

虽然我也添加了收藏夹，但不确定您希望如何显示它。

window.onload = function() {
  var allArtists = [];

  $('#submit').click(function() {
    var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');

    var artistName = $("#name").val();
    var ort = $("#ort").val();
    var datum = $("#datum").val();
    var favourite = $("[name=Favorit]").is(':checked');

    allArtists.push([artistName, ort, datum]);

    var rowId = allArtists.length;
    
    $rowTemplate.find('[data-id=id]').text(rowId);
    $rowTemplate.find('[data-id=name]').text(artistName);
    $rowTemplate.find('[data-id=geburtsort]').text(ort);
    $rowTemplate.find('[data-id=geburtsdatum]').text(datum);
    $rowTemplate.find('[data-id=favorite]').text(favourite);

    $("#table tbody").append($rowTemplate);
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send">
  <label>Name des Künstlers</label>
  <br>
  <input id="name" type="text" placeholder="Name des Künstlers" />
  <br>

  <label>Ort</label>
  <br>
  <input id="ort" type="text" placeholder="Woher stammt der Künstler" />
  <br>

  <label>Geburtsdatum</label>
  <br>
  <input id="datum" type="text" placeholder="Wann ist der Künstler geboren?" />
  <br>
</form>

<p>
  <input type="checkbox" name="Favorit" value="Favorit"> Favorit
  <p>

    <input type="button" id="submit" name="senden" value="Senden">
    <table id="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Geburtsort</th>
          <th>Geburtsdatum</th>
          <th>Favorit</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>