Attempting to display array in a table (Javascript + html)

Question

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. Here is the JavaScript that is relevant:

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:

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

Any help and suggestions will be greatly appreciated!

I have some questions for you, how and where do you invoke submitNewEvent()? Where do you close your </table>? - Where are your <tr> elements? - Where are your <td> elements? - Do you know what are all the necessary elements to properly build a table? - What are all the elements you can use in a table? — Roko C. Buljan
– Roko C. Buljan, Commented Apr 26, 2017 at 22:32
Additionally, var eventName = []; is used for brevity. - Instead of the indexes variables you can simply use Array.push() like eventName.push("blah") - document.write is often referred as the JavaScript's bad parts (for often good reasons) and should be replaced with other methods. — Roko C. Buljan
– Roko C. Buljan, Commented Apr 26, 2017 at 22:34

Roko C. Buljan · Accepted Answer · 2017-04-27 00:13:35Z

You could use only one array events = [];
Inside that array you can append using .push() Object literals that will look like:

[
    {
       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!

thanks so much! can you help me store these into local storage and then bringing it up on another page?

Badacadabra · Accepted Answer · 2017-04-26 23:22:50Z

1

document.write is a bad practice. Avoid it.

If you want to build a table in Vanilla JS, you should follow this model:

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

edited Apr 26, 2017 at 23:22

answered Apr 26, 2017 at 23:02

Badacadabra

8,5357 gold badges33 silver badges54 bronze badges

Comments

Arnau EC · Accepted Answer · 2017-04-26 22:41:49Z

-1

I don't see you closing the table at the end nor using <tr> and <td>. Read this and give it a shot : HTML Tables I guess you could try something like this:

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.

edited Apr 26, 2017 at 22:41

answered Apr 26, 2017 at 22:36

Arnau EC

449 bronze badges

Collectives™ on Stack Overflow

Attempting to display array in a table (Javascript + html)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related