Creating Table in JavaScript

[cyclingg]

I am working on an assignment where we are to display 25 books (thumbnails) with discriptions and price (like a shopping cart) using arrays in javaScript (not in HTML, this is a JavaScript course).

I have made my category index page and everything works. I created a table within the .js file.
My index page with the category table is complete and all links are working the way I want them to.

I then went to create my page that holds all the books using arrays and creating a second table for this 2nd page. I started to write out the code below the first table in the same .js file. But, this second table does not show up in my page. When I place all my 2nd table code into a new .js file and link to it in the 2nd page, the table displays.

My question is, how do you write the code in the .js file for 2 different tables. How do you separate them?

The other thing I noticed is, I have a function that will create a horizontal line where my id is in the page. If I place the function above my first table code, either the table does not work or the horizontal line failed (I can’t remember at the moment). But when I place the function below the table code, the table and the horizontal line displays. Note: This works fine in the codePen; but, it did not work fine in the text editor when displayed in my browser (I use Komodo Edit 8.5).

Here is a CodePen of some of the code (I did not add the images and css):

http://cdpn.io/uKbal

I did not add the code for the second table for the second page (it is long and not complete yet). I just want to know how to add 2 tables where one will display on one page and the other on the next page within the same site. What am I misunderstanding here? I thought it is best to keep all scripts on one page for a small site.

[dyr]

It’s hard to diagnose this problem without the complete reduced test case. Your codepen example doesn’t really demonstrate the problem as there’s only one table being created. Without seeing the code you’re writing for the second table it’s difficult for us to help you debug this problem.

I see you’re using string concatenation to build up your table before inserting it into the page. Is this a requirement of the assignment? If not, you should consider using createElement, insertBefore, and appendChild along with innerHTML and innerText to build up your table structure instead.

Then it will be easier to manipulate the dynamic nodes you’re inserting into the page and that could contribute to less “confusing” things happening.

[Alen]

I just want to know how to add 2 tables where one will display on one page and the other on the next page within the same site. What am I misunderstanding here? I thought it is best to keep all scripts on one page for a small site.

Create a JavaScript file, and link it within each document. Store all the code in that one file. Each file that loads the script will have access to data, arrays, functions, etc that is defined in the JavaScript file.

Place the link right before the closing </body> tag. This way the Document Object Model (DOM) is loaded and ready for manipulation by JavaScript.

Then within your code, abstract each functionality of building a table by the way of function. Then you can do stuff like this:

var home = document.getElementById("ElementOnHomePage");
var buy = document.getElementById("ElementOnBuyPage");
// If we're on the home page print the home page table
if (home) {
  // call the function and pass pointer to the element we're manipulating
  displayHomeTable(home);
}
if (buy) {
  displayBuyTable(buy);
}
...

Then later in your code you can define those two functions and have them build out each table.

Let me know if that makes sense.

[cyclingg]

dyr, in the Unit 4 of our notes (this is an online course through my local college), we just touched on Arrays and Array methods. The table method I used was how our notes showed it. I am a complete noob at JavaScript and have a hard time with it.

I will look into createElement, insertBefore, and appendChild.

[cyclingg]

Alen

I understand your function and how it works. I will try it out to see if I can make it work with my tables.

I am placing my link above the closing </body> tag. I found out in my last assignment that I needed to do this.

“Then within your code, abstract each functionality of building a table by the way of function.”
Sorry for my ignorance, I am not sure what you mean. Would you write out the table differently than I have?

[Author]

Posts