gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:33:19 24 4
gpt4 key购买 nike

我正在使用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>

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

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

enter image description here

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

enter image description here

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

更新:

这是示例 jsFiddle

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

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

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

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

enter image description here

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

enter image description here

最佳答案

我猜测,但问题可能是行详细信息旁边的空 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>

关于javascript - 如何对 HTML 中的行详细信息进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38349477/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com