如何将数据正确地从表单插入表中

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（＃前缀表示ID）的元素，然后在其下面的body元素（无前缀表示标记名）。

.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中。