如何从形式正确地将数据插入表

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中一样。每个单元格都需要自己的文本节点。

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> 

里面点击事件，你可以获取输入你的方式，通过您的数组长度的ID，并将其推入HTML（DOM）与jQuery你已经在使用。

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>'); 

$（“＃表TBODY”）将寻找表的id（＃ - 前缀指示标识），然后身体下面元素（无前缀表示标签名称）的元素。

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