Arrays of Arrays and Creating HTML Rows and Tables to Fill Contents

Here is where I am. (Not far.)

https://codepen.io/jjwarne/pen/pWLowY

What I am trying to do is build a program, using HTML forms, which allows the user to enter details pertaining to a new school course, save that data in localstorage, and build new rows in the #courseBank table and cells to display the information created.

I know what I need to do but not how to do it.

What I need to do is build an array of courses–which I did, it’s empty. Within that array, for each indexed course, I need to build an array, or an array within an array, of the details obtained from the form. So when someone clicks “add,” it creates an indexed item in the array (the course) and store with that item an array of information (the course details).

Then, for each index created in the outer-most array, i.e. the course added, I need to create a row in the #courseBanks table. Then, for each index created for each index in the outer-most array (the course information), I need to create td elements in that row to display the course information.

I also need to code a way to delete the information once added, etc., which I can backward engineer. I can build a script to create a table row for each course added. That’s easy. I do not know, and hoped someone could help me figure out, how to create a table cell (td) element for each piece of course information data added.

You need to know how to enter information into localStorage and then retrieve from localStorage and display it? Is that it?

Tests are a very useful way to driv your code in the direction that it needs to go. The Jasmine testing framework is a nice and easy way to get started with it.

I’ll supply here some sample tests that can be used to fit your requirements.

describe("Class catalog management", function () {
  it("catalogue exists", function () {
    var catalogue = Catalogue();
    catalogue.init();
    expect(catalogue.courses.length).toBe(0);
  });
});
  it("adds a course", function () {
    var catalogue = Catalogue();
    var courseInfo = ["dept", "num", "01/01/2018", "8 months", "10:00 AM", "Title", "Desc", "tue,wed,fri"];

    expect(catalogue.courses.length).toBe(0);
    catalogue.addCourse(courseInfo);

    expect(catalogue.courses.length).toBe(1);
    expect(catalogue.courses[0]).toEqual(courseInfo);
  });

When it comes to adding rows to tables, there are table methods like insertRow() and insertCell() that you can use to really simplify things.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.