我在表上的 jquery 可排序方面遇到问题。我的桌子是这样的:
<table>
<thead>
<th>Number</th>
<th>Text</th>
<th>Order</th>
</thead>
<tbody id="sortable" data-bind="foreach: fruits">
<tr class="ui-state-default">
<td data-bind="text: number"></td>
<td data-bind="text: fruit"></td>
<td data-bind="text: order"></td>
<tr>
我希望它可以排序,除了在订单列上,我有这个代码,但它不起作用
$( function() {
$( "#sortable" ).sortable({
items: 'td:not(:nth-child(3))' }
});
例如,如果我有
考虑替代方法。
$(function() {
$("#sortable").sortable();
});
.sidebyside {
float: left;
margin: 0;
margin-right: -1px;
padding: 0;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<div style="width: 400px;">
<table class="sidebyside" style="width: 66%;">
<thead>
<th>Number</th>
<th>Text</th>
</thead>
<tbody id="sortable" data-bind="foreach: fruits">
<tr class="ui-state-default">
<td data-bind="text: number">1</td>
<td data-bind="text: fruit">Banana</td>
</tr>
<tr class="ui-state-default">
<td data-bind="text: number">2</td>
<td data-bind="text: fruit">Apple</td>
</tr>
<tr class="ui-state-default">
<td data-bind="text: number">3</td>
<td data-bind="text: fruit">peach</td>
</tr>
</tbody>
</table>
<table class="sidebyside" style="width: 33%;">
<thead>
<th>Order</th>
</thead>
<tbody data-bind="foreach: fruits">
<tr class="ui-state-default">
<td data-bind="text: order">5</td>
</tr>
<tr class="ui-state-default">
<td data-bind="text: order">10</td>
</tr>
<tr class="ui-state-default">
<td data-bind="text: order">10</td>
</tr>
</tbody>
</table>
<table>
</div>
填充表格会需要更多工作,但它确实实现了您的目标。