Aligning Tables using JavaScript

Question

I need to create a shopping cart. The first thing to do is to list the catalogue in a table using JavaScript. I am able to list it in one long list like table but I want the page to display 10 items at a time.

For example: Product ID, Product Name and Price are my three columns. I want these columns to repeat 4 times over. The code I have so fat is:

        //Initialize Constants
        TABLE_BEGIN = "<table border='1'>";
        TABLE_END = "</table>";
        TABLE_HEADING_BEGIN = "<th>";
        TABLE_HEADING_END = "</th>";
        TABLE_ROW_BEGIN = "<tr>";
        TABLE_ROW_END = "</tr>";
        TABLE_COLUMN_BEGIN = "<td>";
        TABLE_COLUMN_END = "</td>";
        UNDERLINE = "<hr>";

        // Shopping cart based arrays
        var orderedProductCodeArr = new Array()
        var quantityArr = new Array()

        // Creating the catalogue
        document.writeln("<h1>HomewareCity Catalogue</h1>");
        document.writeln(UNDERLINE);

        // Create Table for catalogue
        document.writeln(TABLE_BEGIN);
        document.writeln(TABLE_HEADING_BEGIN + "Item ID" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Product Name" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Price" + TABLE_HEADING_END +
                         TABLE_HEADING_BEGIN + "Item ID" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Product Name" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Price" + TABLE_HEADING_END +
                         TABLE_HEADING_BEGIN + "Item ID" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Product Name" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Price" + TABLE_HEADING_END +
                         TABLE_HEADING_BEGIN + "Item ID" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Product Name" + TABLE_HEADING_END + TABLE_HEADING_BEGIN + "Price" + TABLE_HEADING_END);

        // List all the products
        for(i = 0; i<=productListArr.length; i++){
            document.writeln(TABLE_ROW_BEGIN);
            document.writeln(TABLE_COLUMN_BEGIN + i + TABLE_COLUMN_END + TABLE_COLUMN_BEGIN + productListArr[i] + TABLE_COLUMN_END + TABLE_COLUMN_BEGIN + priceListArr[i] + TABLE_COLUMN_END);
            document.writeln(TABLE_ROW_END);
        }
        document.writeln(TABLE_END);

This code does work for me. I have not included the declaration of i since there are a lot of other things that are not related to this question there.

Can you provide a fiddle ?

Diptendu
– Diptendu

2015-04-06 08:34:56 +00:00
Commented Apr 6, 2015 at 8:34 — Diptendu
– Diptendu, Commented Apr 6, 2015 at 8:34
you looking to paginate the table??

Code2Interface
– Code2Interface

2015-04-06 09:32:38 +00:00
Commented Apr 6, 2015 at 9:32 — Code2Interface
– Code2Interface, Commented Apr 6, 2015 at 9:32

Aviad P. · Accepted Answer · 2015-04-06 10:27:39Z

1

I can see a few problems there. First of all you are using <th> tags outside of a <tr> tag.

And secondly, you are repeating the same header tags 4 times, meaning you have a total of 12 table columns, but when you fill the table later on in your for loop, you only supply 3 cells per row.

EDIT: Clarification

Table html should look like this:

<table>
    <tr>
        <th>...</th>
        <th>...</th>
        ...
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        ...
    </tr>
    ...
</table>

Also, you want 4 records per row, if I understood you correctly, in that case, you should put a condition around your opening row tag and around your closing end tags. Maybe something like this:

var endPending = false;

for(i = 0; i<=productListArr.length; i++){
    if(i % 4 == 0) {
        document.writeln(TABLE_ROW_BEGIN);
        endPending = true;
    }
    ...
    if(i % 4 == 3) {
        document.writeln(TABLE_ROW_END);
        endPending = false;
    }
}
if(endPending) document.writeln(TABLE_ROW_END);
...

Hope this helps.

edited Apr 6, 2015 at 10:27

answered Apr 6, 2015 at 8:34

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Littlewood Over a year ago

When I add the header tags to the for loop it puts them above every cell. I only need them at the top where they are. I just need the table to be 11 rows long (10 rows of data and the extra for the headings) and 12 columns. I just cannot get this to work. It just keeps putting the data underneath the previous row.

Collectives™ on Stack Overflow

Aligning Tables using JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related