将可排序表添加到可扩展表中

Question

亲爱的StackOverflow用户，

我正在寻找这个问题的解决方案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>

我将它排序的意思是你可以拖放它并将它重新排序到表中的其他地方。

我希望有人可以帮我解决这个问题。

感谢您对此进行调查。

Answer 1

您的HTML代码存在大量问题。请检讨一下。您可以使用jQueryUI library's sortable轻松对其进行排序。

＆＃13;

＆＃13;

 
    $( "#sortable" ).sortable({
   items: "tr",

    });
    $( "#sortable tr" ).disableSelection();
  

＆＃13;

#sortable tr{
cursor:pointer;
}

＆＃13;

<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 	</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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

答案是使用可排序的开始和停止功能并定义开始位置和结束位置，然后从那里克隆子行。