排序,以扩展表添加
亲爱的*用户,排序,以扩展表添加
现在我正在寻找这个问题的3天一个解决方案,我不能找到它在互联网上。我的工作是使管理面板添加发票。到目前为止,我所点击的是一张桌子,当你点击该行时,该桌子可以扩展,而我的目标是使其可排序。
$(function() {
$("tr.child-row").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideUp();
} else {
$target.closest("tr").next().slideToggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-poducts">
<thead>
<tr>
<th>
verbergen
</th>
<th>
Aantal
</th>
<th>
Verwijzing
</th>
<th>
Beschrijving
</th>
<th>
Angeboden prijs
</th>
<th>
Korting
</th>
<th>
Nieuwe prijs
</th>
<th>
Totaal
</th>
<th>
Acties
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="hide[]">
</td>
<td>
1
</td>
<td>
31516
</td>
<td>
DIGIDOT LED STRIP RGB HR 5m 24V BLACK PCB
</td>
<td class="text-right">
€285,00
</td>
<td class="text-right">
50%
</td>
<td class="text-right">
€142,50
</td>
<td class="text-right">
€142,50
</td>
<td>
<button id="btn">Click me</button>
</td>
</tr>
<tr class="child-row">
<td colspan="9">
<div id="test">
<table width="100%">
<tr>
<td width="50%">
<textarea></textarea>
</td>
<td width="50%">
<button class="btn btn-primary">kleine text</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="hide[]">
</td>
<td>
1
</td>
<td>
31516
</td>
<td>
DIGIDOT LED STRIP RGB HR 5m 24V BLACK PCB
</td>
<td class="text-right">
€285,00
</td>
<td class="text-right">
50%
</td>
<td class="text-right">
€142,50
</td>
<td class="text-right">
€142,50
</td>
<td>
<button id="btn">Click me</button>
</td>
</tr>
<tr class="child-row">
<td colspan="9">
<div id="test">
<table width="100%">
<tr>
<td width="50%">
<textarea></textarea>
</td>
<td width="50%">
<button class="btn btn-primary">kleine text</button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
我的意思使它排序是,你可以将它拖放和表中的其他地方重新排序。
我希望有人能帮助我解决这个问题。
感谢您的关注。
答案是使用开始和停止排序功能,并定义起始和终止位置并从那里你可以克隆子行。
您的HTML代码有很多错误。请检查它。您可以使用jQueryUI library's sortable轻松对其进行排序。
$("#sortable").sortable({
items: "tr",
});
$("#sortable tr").disableSelection();
#sortable tr{
cursor:pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="sortable">
<table>
<tr>
<th>verbergen</th>
<th>Aantal \t </th>
<th>Verwijzing</th>
</tr>
<tr>
<td><input type="checkbox" name="hide[]"/></td>
<td>1</td>
<td>A </td>
</tr>
<tr>
<td><input type="checkbox" name="hide[]"/></td>
<td>2</td>
<td>B </td>
</tr>
<tr>
<td> <input type="checkbox" name="hide[]"/></td>
<td>3</td>
<td>C </td>
</tr>
<tr>
<td> <input type="checkbox" name="hide[]"/></td>
<td>4</td>
<td>D </td>
</tr>
<tr>
<td> <input type="checkbox" name="hide[]"/></td>
<td>5</td>
<td>E</td>
</tr>
<tr>
<td> <input type="checkbox" name="hide[]"/></td>
<td>6</td>
<td>F </td>
</tr>
</table>
</div>
谢谢先生您的快速响应,我已阅读JQueryUI文档,但我无法弄清楚如何拖放2行(Parrent行+子行)。 –
您可以对发布的代码段中的行进行排序。我希望你会发现这个答案有用。 –
我想你明白我错了,想法是在同一时间拖放2行。 –
虽然JSFiddle可以提供帮助,但在您的SO帖子中包含您的代码(仅限相关部分)是一种很好的做法。 – kalabalik
谢谢你的提示! –