尝试在表格中显示数组（Javascript + html）答案

【问题标题】：Attempting to display array in a table (Javascript + html)尝试在表格中显示数组（Javascript + html）
【发布时间】：2017-04-26 22:26:11
【问题描述】：

目前，我有一个文本框和日期时间本地输入，每次单击提交按钮时都会将某些内容存储到数组中。数组可以工作，但是，我似乎无法使用 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>

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

【问题讨论】：

java?请务必阅读this 和this。
我有一些问题要问你，你如何以及在哪里调用submitNewEvent()？你在哪里关闭你的</table>？ - 你的<tr> 元素在哪里？ - 你的<td> 元素在哪里？ - 你知道正确构建 table 的所有必要元素吗？ - 您可以在表格中使用哪些元素？
此外，var eventName = []; 用于简洁。 - 您可以简单地使用Array.push() 代替索引变量，例如eventName.push("blah") - document.write 通常被称为 JavaScript 的 bad 部分（通常有充分的理由），应该用其他方法替换。
另外，你在哪里使用你的theDate 数组？

标签： javascript html arrays for-loop

【解决方案1】：

document.write 是一种不好的做法。避免它。

如果你想在 Vanilla 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>

【讨论】：

【解决方案2】：

你只能使用一个数组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 数组都成功保存，可以重复使用或提交到服务器数据库！

【讨论】：

非常感谢！你能帮我将这些存储到本地存储中，然后在另一个页面上显示吗？

【解决方案3】：

我没有看到您最后关闭表格，也没有使用<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 如果它帮助了你。

【讨论】：