您好我希望把我的給定的數據,從形式到我的表,但數據始終處於ID:/如何從形式正確地將數據插入表
在我的形式,我可以輸入一個名字,生日和地點,這應該存儲在表格中。 ID應該從1開始。 我不知道如何實現它。
我希望有人能幫助我。
您好我希望把我的給定的數據,從形式到我的表,但數據始終處於ID:/如何從形式正確地將數據插入表
在我的形式,我可以輸入一個名字,生日和地點,這應該存儲在表格中。 ID應該從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>
您需要爲每個單獨的「東西」創建一個單元格,就像在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);
});
};
首先把你的頭文件放到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找到的元素
這應該做作爲首發^^ 我希望這有助於在裏面!
如果你是開放使用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
。
謝謝你我會試試 – Addy1992
document.createTextNode(allArtists ['artistName']);這部分不起作用。我得到undefined:/ – Addy1992
檢查你的控制檯中的allArtists數組,是否定義在那裏? –