[英]Attempting to display array in a table (Javascript + html)
Currently, I have a text box and date-time local input that stores something into an array every time I click on a submit button. 目前,我有一个文本框和日期时间本地输入,每次单击提交按钮时,该输入都会将某些内容存储到数组中。 The arrays work, however, I do not seem to be able to put them into a table using a for loop and displaying them.
数组工作,但是,我似乎无法使用for循环将它们放入表中并显示它们。 Here is the JavaScript that is relevant:
以下是相关的JavaScript:
var eventName = new Array();
var theDate = new Array();
var index = 0;
var index2 = 0;
function submitNewEvent() {
eventName[index] = document.getElementById("eventName").value;
index++;
theDate[index2] = document.getElementById("date").value;
index2++;
var newTable = "<table>";
for (var i=0; i < eventName.length; i++){
newTable += "" + eventName[i] + "<br>"
}
}
Here is how I am attempting to display the table in HTML: 这是我尝试以HTML显示表格的方式:
<script>
document.write ('<p>colour1: ' + newTable + '</p>');
</script>
Any help and suggestions will be greatly appreciated! 任何帮助和建议将不胜感激!
document.write
is a bad practice. document.write
是一种不良做法。 Avoid it. 躲开它。
If you want to build a table in Vanilla JS, you should follow this model: 如果要在Vanilla JS中构建表,则应遵循以下模型:
(For the sake of simplicity, we build only one column in the example...) (为简单起见,我们在示例中仅构建一列...)
var arr = ['foo', 'bar', 'baz'], table = document.getElementsByTagName('table')[0], tr = null, td = null, txt = ''; for (var i = 0; i < arr.length; i++) { txt = document.createTextNode(arr[i]); td = document.createElement('td'); tr = document.createElement('tr'); td.appendChild(txt); tr.appendChild(td); table.appendChild(tr); }
table { border-collapse: collapse; } tr, th, td { padding: 5px; border: solid 1px black; } th { font-weight: bold; }
<table> <tr> <th>Test</th> </tr> </table>
You could use only one array events = [];
您只能使用一个数组
events = [];
Inside that array you can append using .push()
Object literals that will look like: 在该数组内,您可以使用
.push()
对象常量附加如下内容:
[
{
name : "Super event!",
date : "12/31/2017"
},
{
name : "This is some event name",
date : "09/22/2017"
}
]
Here's an example: 这是一个例子:
// Cache your selectors var EL_name = document.getElementById("name"), EL_date = document.getElementById("date"), EL_table = document.getElementById("table"), // Our empty table in HTML events = []; // One simple array to store object literals function submitNewEvent() { // Create an Object literal with out event dara var eventObj = { name : EL_name.value, date : EL_date.value }; // Create Row var row = `<tr> <td>${eventObj.name}</td> <td>${eventObj.date}</td> </tr>`; // Clear inputs EL_name.value = EL_date.value = ""; // Store into Array events.push( eventObj ); // Insert row into table EL_table.insertAdjacentHTML("beforeend", row); }
table {border-collapse: collapse;} th, td {border: 1px solid #aaa; padding: 4px 8px;}
Name<input type="text" id="name"> Date<input type="text" id="date"> <button onclick="submitNewEvent()">ADD EVENT</button> <table id="table"> <tr> <th>NAME</th> <th>DATE</th> </tr> <!-- JS will insert here new TR --> </table>
Although only the last event <tr>
HTML is added to the <table>
all the events
array with all the entered events is successfully preserved and can be reused or submitted to a server database! 尽管仅将最后一个事件
<tr>
HTML添加到了<table>
所有events
数组以及所有输入的事件都已成功保留,可以重用或提交给服务器数据库!
I don't see you closing the table at the end nor using <tr> and <td>
. 我看不到您最后关闭了表,也没有使用
<tr> and <td>
。 Read this and give it a shot : HTML Tables I guess you could try something like this: 阅读并试一下: HTML表我想您可以尝试这样的事情:
var newTable = "<table><tr><td>"; for (var i=0; i < eventName.length; i++){ newTable += "" + eventName[i] + "<br>" } newTable += "</td></tr></table>";
This could do the trick. 这可以解决问题。 LMK if it helped u out.
LMK如果有帮助的话。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.