使用 JavaScript 对齐表格

Question

我需要创建一个购物车。要做的第一件事是使用 JavaScript 在 table 中列出目录。我可以将它列在一个长列表中，例如 table，但我希望该页面一次显示 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

我可以看出一些问题。首先，您在 <tr> 标签之外使用 <th> 标签。

其次，您将相同的 header 标签重复 4 次，这意味着您总共有 12 table 列，但是当您稍后在 table 中填写for 循环，每行只提供 3 个单元格。

编辑：澄清

Table 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 对齐表格

Aligning Tables using JavaScript

html

javascript

html-table