javascript - 如何对 HTML 中的行详细信息进行排序？

Question

我正在使用sorttable对表中的列进行排序。

现在我有一个表格如下:

<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 class="row-details">
          <td>{.salesOrderId}</td>
          <td colspan="4">
            <table class="sortable draggable">
              <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>{@math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
                    </tr>
                  {/items}
              </tbody>
            </table>
          </td>
        </tr>
        {/orders}
    </tbody>
</table>

您是否在上面提到的表中注意到我每行都有行详细信息？ 现在，当我单击列标题对其进行排序时，我首先获得行详细信息，然后获得所有主行。

这是我的表格在排序之前的样子:

这是我的表格排序后的样子:

仍然使用sorttable有没有解决这个问题的方法？

更新:

这是示例 jsFiddle

行详细信息现在已正确排序，如上面的 jsFiddle 所示。但现在的问题是:

当您点击城市列时，一切看起来都很好。现在，如果我们再次单击“城市列”，行详细信息将显示在实际行之前，这是错误的。

请查看下面的图片以了解有关问题的更多信息:

点击“城市”栏后:(看起来很完美)

再次单击“城市”列后:(对于开发人员来说是预期的，但对于用户来说却是意料之外的)

Answer 1

我猜测，但问题可能是行详细信息旁边的空 td。我添加名字作为值并设置 css 样式 display:none。现在行详细信息也将正确排序。

更新的答案: 尝试将表嵌套在 td 内，如下例所示。

试试这个:

                <table class="sortable">
        <thead>
          <tr>
            <th>First Name</th>
            <th>LastName</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Vishal</td>
            <td> Sherathiya
              <table>
                <thead>
                  <tr>
                    <th>Degree</th>
                    <th>Percentage</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>B.E.</td>
                    <td>67</td>
                  </tr>
                </tbody>
              </table>
              <td>
          </tr>

          <tr>
            <td>Nikunj</td>
            <td>Ramani
              <table>
                <thead>
                  <tr>
                    <th>Degree</th>
                    <th>Percentage</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>B.E.</td>
                    <td>80</td>
                  </tr>
                  <tr>
                    <td>M.E.</td>
                    <td>54</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr>
            <td>Raj</td>
            <td>Gosai</td>
          </tr>
        </tbody>
      </table>