javascript - How to display user input data stored in array, using HTML table

I'm kinda new to html/javascript. I wanted to store the user input value in array (already done this part) and display it into HTML table(I'm stuck at this one). When user press the button, the table will show up at the bottom.

Here's my code so far: HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src=".min.js"></script>
  <script class="jsbin" src=".templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src=".js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <form>
    <h1>Please enter data</h1>
    <input id="title" type="text" placeholder="Title" />
    <input id="name" type="text" placeholder="Name" />
    <input id="tickets" type="text" placeholder="Tickets" />
    <input type="button" value="Save/Show" onclick="insert()" />
  </form>
  <div id="display"></div>
</body>
</html>

This is my Javascript code:

var titles  = [];
var names   = [];
var tickets = [];

var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");
var ticketInput = document.getElementById("tickets");

var messageBox  = document.getElementById("display");

function insert ( ) {
 titles.push( titleInput.value );
 names.push( nameInput.value );
 tickets.push( ticketInput.value );

 clearAndShow();
}

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";

  // Show our output
  messageBox.innerHTML = "";

  messageBox.innerHTML += "<tr>Titles</tr>" + titles.join(" ") + "<td></td>";
  messageBox.innerHTML += "<tr>Name</tr> <td>" + names.join(" ") + "</td>";
  messageBox.innerHTML += "<tr>tickets</tr> <td>" + tickets.join(" ")+ "</td>";
}

I can't display the array into the tables. I'm quite new to Javascript/HTML so any help would be appreciated. :D

Here's my code so far: HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn./ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode./svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <form>
    <h1>Please enter data</h1>
    <input id="title" type="text" placeholder="Title" />
    <input id="name" type="text" placeholder="Name" />
    <input id="tickets" type="text" placeholder="Tickets" />
    <input type="button" value="Save/Show" onclick="insert()" />
  </form>
  <div id="display"></div>
</body>
</html>

This is my Javascript code:

var titles  = [];
var names   = [];
var tickets = [];

var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");
var ticketInput = document.getElementById("tickets");

var messageBox  = document.getElementById("display");

function insert ( ) {
 titles.push( titleInput.value );
 names.push( nameInput.value );
 tickets.push( ticketInput.value );

 clearAndShow();
}

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";

  // Show our output
  messageBox.innerHTML = "";

  messageBox.innerHTML += "<tr>Titles</tr>" + titles.join(" ") + "<td></td>";
  messageBox.innerHTML += "<tr>Name</tr> <td>" + names.join(" ") + "</td>";
  messageBox.innerHTML += "<tr>tickets</tr> <td>" + tickets.join(" ")+ "</td>";
}

I can't display the array into the tables. I'm quite new to Javascript/HTML so any help would be appreciated. :D

Share Improve this question asked Mar 23, 2016 at 16:53 Bluesky Izz 451 silver badge7 bronze badges

You will have to loop over array and create HTML string and then set it as element.innerHTML – Rajesh Commented Mar 23, 2016 at 16:56
@Rajesh Did you mean at every array that I've created? – Bluesky Izz Commented Mar 23, 2016 at 17:03
I have added an answer. Hope it helps. – Rajesh Commented Mar 23, 2016 at 17:13

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

As I have already mented, you will have to loop over array and pute html and set it. Your function clearAndShow will set last value only.

I have taken liberty to update your code. You should not save data in different arrays. Its better to use one array with proper constructed object.

JSFiddle

var data = [];
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");

var messageBox = document.getElementById("display");

function insert() {
  var title, name, ticket;
  title = titleInput.value;
  name = nameInput.value;
  ticket = ticketInput.value;
  data.push({
    title: title,
    name: name,
    ticket: ticket
  });
  clearAndShow();
}

function clearAndShow() {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";
  messageBox.innerHTML = puteHTML();
}

function puteHTML() {
  var html = "<table>";
  console.log(data)
  data.forEach(function(item) {
    html += "<tr>";
    html += "<td>" + item.title + "</td>"
    html += "<td>" + item.name + "</td>"
    html += "<td>" + item.ticket + "</td>"
    html += "</tr>";
  });
  html += "</table>"
  return html;
}

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<head>
  <script class="jsbin" src=""></script>
  <script class="jsbin" src="http://ajax.aspnetcdn./ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

  <body>
    <form>
      <h1>Please enter data</h1>
      <input id="title" type="text" placeholder="Title" />
      <input id="name" type="text" placeholder="Name" />
      <input id="tickets" type="text" placeholder="Tickets" />
      <input type="button" value="Save/Show" onclick="insert()" />
    </form>
    <div id="display"></div>
  </body>

Please try and change your js code like below, not the most elegant but a start:

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";

  // Show our output
  messageBox.innerHTML = "";
  messageBox.innerHTML += "<tr>";
  messageBox.innerHTML += "<td>Titles</td>";
  messageBox.innerHTML += "<td>Name</td>";
  messageBox.innerHTML += "<td>Tickets</td>";
  messageBox.innerHTML += "</tr>";
  for(i = 0; i <= titles.length - 1; i++)
  {
    messageBox.innerHTML += "<tr>";
    messageBox.innerHTML += "<td>" + titles[i]+ "</td>";
    messageBox.innerHTML += "<td>" + names[i] + "</td>";
    messageBox.innerHTML += "<td>" + tickets[i]+ "</td>";
    messageBox.innerHTML += "</tr>";
  }
}

and your display html like so:

<table id="display"></table>

have a look at fiddle over here https://jsfiddle/gvanderberg/cwmzyjf4/

The data array in Rajesh's example is the better option to go for.

you deleted your last question about the numbering of authors, but I wrote a big answer to you for it. Just for you to have it :

Wow, man you have several problems in your logic.

First, you have to specify to your form not to submit when you click on one or the other submit buttons (Add a book, or Display book) :

<form onsubmit="return false;">

Second, you have to define your numbering var to 0 and use it when you want to assign a number to a book :

var numbering = 0;

Then, in your addBook function, you have to use that global numbering variable to set you no variable :

function addBook() {
  numbering++; // increments the number for the books (1, 2, 3, etc)
  var no, book, author;
  book = bookInput.value;
  author = nameInput.value;
  no = numbering;
  ...
}

Then you have all kind of mistakes like double ";" on certain lines etc.

A huge mistake is also done on your code when you use "forEach". Notice this function only works when you use jQuery library ! You have to include it before you use it :

<script src="//cdnjs.cloudflare./ajax/libs/jquery/2.2.2/jquery.min.js"></script>

An other huge mistake you do is that your "Display" button has the id "display" and your messageBox also has this id. This is forbidden because when you want to use the element which has this ID, Javascript won't know which of the two is the good one. So rename your button id in displayAuthors :

<input type="submit" id="displayAuthors" value="Display" onclick="displayBook()" />

Now, what you also can do, is to call your displayBooks function everytime you add a new book like this :

function addBook() {
  numbering++;
  var no, book, author;
  book = bookInput.value;
  author = nameInput.value;
  no = numbering;

  data.push({
    book: book,
    author: author,
    no: no
  });

  displayBook();
}

So I did all these things here on CodePen : https://codepen.io/liorchamla/pen/JMpoxM

The JQuery solution

Here you used the basics of Javascript (called Vanilla JS) which is very cool because you have to learn it, but I also wrote you a CodePen to show you how you could have done this with jQuery :-)

Here it is : http://codepen.io/liorchamla/pen/oxwNwd

Basicly, the javascript changed to this :

$(document).ready(function(){
  var data = []; // data is an empty array

  // binding the addBook button with the action :
  $('#addBook').on('click', function(){
    var book = {
      title: $('#bookname').val(),
      author: $('#authors').val(),
      // note we won't use a numbering variable
    };
    data.push(book);

    // let's automaticly trigger the display button ? 
    $('#displayBooks').trigger('click');
  });
  // binding the displayBooks button with the action :
  $('#displayBooks').on('click', function(){
    $('#display').html(puteHTML());
  });

  function puteHTML(){
    // creating the table
    html = "<table><tr><th>No</th><th>Book</th><th>Author</th></tr>";
    // for each book in the data array, we take the element (book) and the index (number)
    data.forEach(function(element, index){
      // building the table row, note that index starts at 0, so we increment it to have a start at 1 if it is 0, 2 if it is 1 etc.
      html += "<tr><td>" + parseInt(index++) + "</td><td>" + element.title + "</td><td>" + element.author + "</td></tr>";
    })
    html += "</table>";
    // returning the table
    return html;
  }
})

You might find it plicated, but with time you will see that jQuery helps a lot !

They are lot of things we could enpower in this script but this is a good starting, don't you think ?

Cheers from Marseille, France !

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display user input data stored in array, using HTML table - Stack Overflow

3 Answers 3

you deleted your last question about the numbering of authors, but I wrote a big answer to you for it. Just for you to have it :

与本文相关的文章

评论列表(0)