如何显示嵌套表?

时间:2016-07-12 16:13:40

标签: html node.js

我在html中有一个表格,如下所示:

<table class="sortable draggable">
    <thead>
        <tr>
            <th class="col-salesOrderId">Order Number</th>
            <th class="col-orderDate">Date of Order</th>
            <th class="col-party">Party</th>
            <th class="col-edit">Edit</th>
            <th class="col-delete">Delete</th>
        </tr>
    </thead>
    <tbody>
        {#orders}
        <tr>
            <td class="col-salesOrderId">{.salesOrderId}</td>
            <td class="col-orderDate">{@formatDate date=orderDate format="DD-MM-YYYY" /}</td>
            <td class="col-party">{.party.partyName}</td>
            <td class="col-edit">
                <button class="btn btn-info btn-edit">
                    &nbsp;
                </button>
            </td>
            <td class="col-delete">
                <button class="btn btn-danger btn-delete">
                    &nbsp;
                </button>
            </td>
        </tr>
        <tr>
          <table class="sortable draggable row-details">
            <thead>
                <tr>
                    <th class="col-itemName">Item Name</th>
                    <th class="col-quantity">Quantity</th>
                    <th class="col-rate">Rate</th>
                    <th class="col-amount">Amount</th>
                </tr>
            </thead>
            <tbody>
                {#items}
                  <tr>
                    <td>{.item.itemName}</td>
                    <td>{.quantity}</td>
                    <td>{.rate}</td>
                      <td>{.quantity * .rate}</td>
                  </tr>
                {/items}
            </tbody>
          </table>
        </tr>
        {/orders}
    </tbody>
</table>

我得到如下所示的输出:

enter image description here

为什么我会得到这样的输出?我希望看到嵌套表。

4 个答案:

答案 0 :(得分:1)

您需要将子Error Code: 1054. Unknown column 'database.Table_2.CYCLE' in 'where clause'标记嵌套在<table>标记内,而不是<td>标记内。这样做可以使其正确显示,因为只有<tr><td>标记可以直接放在<th>标记内。

答案 1 :(得分:1)

<table>
    <tr>
         <td> <!-- must be in td -->
             <table> <!-- nested table -->
                   <tr>
                         <td>

                         </td>
                   </tr>
             </table>
         </td>
    </tr>
</table>

你的嵌套表需要在td或th之内。

答案 2 :(得分:1)

您的HTML有几处错误,从此开始:

{#orders}

正如其他人所说,这也很糟糕:

<tr>↩          <table class="sortable draggable row-details"

帮自己一个大忙,并开始使用像W3C's这样的HTML验证器。它会很快发现这样的问题。 (它还会发现其他可能需要修复的东西,但是当它有所帮助时,它会节省很多时间。)

此外,开始使用Chrome检查器查看标记失误时的操作。在这种情况下,您可以看到Chrome关闭了您的第一个表,而不是嵌套它。当Chrome使用您的HTML混乱时,这表明您可能在该位置发生错误。

  </tr></tbody></table>
                {#items}

                {/items}
            <table class="sortable draggable row-details">
            <thead>
                <tr>
                    <th class="col-itemName">Item Name</th>
                    <th class="col-quantity">Quantity</th>

答案 3 :(得分:0)

<table>代码必须位于<td><th>标记内才能嵌套。在您的代码中,您已将<table>标记作为<tr>标记的子标记,这是错误的。它应该是<td><th>的孩子。

<td><th>之间插入<tr><table>会正确显示输出。

以下是工作链接供参考: Nested Tables in HTML

实施例:

&#13;
&#13;
<table border="1">
  <thead>
    <tr>
      <th>Item 1
      <th>Item 2
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table border="1">
          <tr>
            <td>1
            <td>2
          </tr>
          <tr>
            <td>1
            <td>2
          </tr>
        </table>
      <td>A
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;