作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用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">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</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 所示。但现在的问题是:
当您点击城市列
时,一切看起来都很好。现在,如果我们再次单击“城市列”,行详细信息将显示在实际行之前,这是错误的。
请查看下面的图片以了解有关问题的更多信息:
点击“城市”栏后:(看起来很完美)
再次单击“城市”列后:(对于开发人员来说是预期的,但对于用户来说却是意料之外的)
最佳答案
我猜测,但问题可能是行详细信息旁边的空 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/
我是一名优秀的程序员,十分优秀!