CODEWITHSUNDEEP
javascripthtmlhtml-table
Christopher Littlewood
Christopher Littlewood

Reputation: 803

Aligning Tables using JavaScript

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.

Upvotes: 0

Views: 71

Answers (1)

Aviad P.
Aviad P.

Reputation: 32639

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.

Upvotes: 1

Related Questions