使用JavaScript对齐表格

我目前正在处理Uni作业，而我只是在提交之前尝试做一些触摸操作。任务是创建一个购物车。首先要做的就是使用JS在表格中列出目录。我可以将它列在一个像表格这样的长列表上，但是我想让它一次显示10个项目。例如：产品ID，产品名称，价格是我的三个栏目。我希望这些列重复4次。这是我迄今为止的代码。这跟我越来越近了。使用JavaScript对齐表格

 //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的部分，因为在那里有很多与这个问题无关的其他东西。

感谢您的帮助提前克里斯

来源

2015-04-06 Christopher Littlewood

你能提供一个小提琴吗？ – Diptendu 2015-04-06 08:34:56

你在寻找分页吗？ – Code2Interface 2015-04-06 09:32:38

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

其次，您将重复相同的标题标记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); 
...

希望这会有所帮助。

来源

2015-04-06 08:34:51

当我将标题标签添加到for循环时，它将它们放在每个单元格上方。我只需要他们在他们的顶部。我只需要表格为11行（10行数据和额外的标题）和12列。我只是无法得到这个工作。它只是把数据放在前一行的下面。 – 2015-04-06 09:39:14

使用JavaScript对齐表格

回答

相关问题