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>

Answer 2

您需要为每个单独的“事物”创建一个单元格，就像在HTML中一样。每个单元都需要自己的textnode。

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


$('#submit').click(function(){
var artistName = $("#name").val();
var ort = $("#ort").val();
var datum = $("#datum").val();
allArtists.push([artistName,ort,datum])

var tableRef = document.getElementById('table').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var newCell1  = newRow.insertCell(0);
var newCell2  = newRow.insertCell(1);
var newCell3  = newRow.insertCell(2);

// Append a text node to the cell
var newText1  = document.createTextNode(allArtists['artistName']);
var newText2  = document.createTextNode(allArtists['ort']);
var newText3  = document.createTextNode(allArtists['datum']);
newCell1.appendChild(newText1);
  newCell2.appendChild(newText2);
  newCell3.appendChild(newText3);
  });
};

Answer 3

首先将标题放入thead中，这样我们才能获得tbody中的真实数据。像这样修改你的HTML：

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

在click事件中，您可以按照自己的方式获取输入，从数组长度生成id并使用已经使用的jquery将其推送到html（DOM）。

var artistName = $("#name").val();
var ort = $("#ort").val();
var datum = $("#datum").val();
var id = allArtists.length; 
allArtists.push({ id: id, name: artistName, ort: ort, datum: datum });

$('#table tbody').append('<tr><td>'+id+'</td><td>'+artistName+'</td><td>'+ort+'</td><td>'+datum+'</td><td>-</td></tr>');

$（'＃table tbody'）将查找id为table的元素（＃-prefix表示id），然后查找下面的body元素（no-prefix表示标记名称）。

.append会将字符串作为html附加到找到的元素

中

这应该作为首发^^ 我希望这有帮助！

Answer 4

如果你愿意使用jQuery，这是一个更方便的方法：

$("#submit").click(function() {
  var artistName = $("#name").val();
  var ort = $("#ort").val();
  var datum = $("#datum").val();
  var rowsCount = $("#table tbody tr").length;

  var row = "<tr>" +
    "<td>" + (rowsCount + 1) + "</td>" +
    "<td>" + artistName + "</td>" +
    "<td>" + ort + "</td>" +
    "<td>" + datum + "</td>" +
    "<td>" + true + "</td>" +
    "</tr>";

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

上述工作会为表格创建一行，并将其附加到表格的tbody。

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

4 个答案: