Как правильно вставить данные из формы в таблицу

Question

Привет Я хочу, чтобы положить мои данные данные из формы в моей таблице, но данные всегда под 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> 

Внутри вашего события мыши вы можете получить на вход, как вы делаете, генерировать идентификатор из вашей длины массива и вставьте его в 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») будет выглядеть для элемента с идентификатором таблицы (# -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 вашего стола.