试图在表格中显示数组（

Question

）目前，我有一个文本框和日期时间本地输入，每次单击提交按钮时都会将某些内容存储到数组中。然而，数组工作，但我似乎无法使用for循环将它们放入表中并显示它们。下面是相关的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>" 
    } 
} 

这里是我在尝试在HTML显示表：

<script> 
     document.write ('<p>colour1: ' + newTable + '</p>'); 
    </script> 

任何帮助和建议，将不胜感激！

Answer 1

我没有看到你在最后关闭表格，也没有使用<tr> and <td>。阅读并给它一个镜头：HTML Tables 我想你可以尝试这样的事：

var newTable = "<table><tr><td>"; 
 
    for (var i=0; i < eventName.length; i++){ 
 
    newTable += "" + eventName[i] + "<br>" 
 
    } 
 
newTable += "</td></tr></table>";

这可能做的伎俩。 LMK，如果它帮助你了。

Answer 2

document.write是一个不好的做法。躲开它。

如果你想建立在香草JS一个表，你应该遵循这个模式：

（为简单起见，我们建立的例子只有一个列...）

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>

Answer 3

你可以只使用一个阵列events = [];
数组里面你可以追加使用.push()个对象文本，这将是这样的：

[ 
    { 
     name : "Super event!", 
     date : "12/31/2017" 
    }, 
    { 
     name : "This is some event name", 
     date : "09/22/2017" 
    } 
] 

下面是一个例子：

// 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>

虽然只有最后一个事件<tr> HTML被添加到<table>所有events阵列所有输入的事件已成功保留，可以重复使用或提交给服务器数据库！