Question

我需要创建一个购物车。首先要做的是使用JavaScript在表中列出目录。我可以将它列在一个长表中，如表格，但我希望页面一次显示10个项目。

例如：Product ID，Product Name和Price是我的三列。我希望这些列重复4次。我这么胖的代码是：

        //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);

此代码对我有用。我没有包括i的声明，因为那里有很多其他与此问题无关的事情。

Answer 1

我可以看到一些问题。首先，您使用<th>标记之外的<tr>标记。

其次，您重复相同的标题标记4次，这意味着您总共有12个表格列，但是当您稍后在for循环中填充表格时，每行只提供3个单元格

编辑：澄清

表格html应如下所示：

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

另外，如果我理解正确的话，你每行需要4条记录，在这种情况下，你应该在开始行标记周围和结束标记周围添加一个条件。也许是这样的：

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);
...

希望这有帮助。

使用JavaScript对齐表格

1 个答案: