排序，以扩展表添加

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

答案是使用开始和停止排序功能，并定义起始和终止位置并从那里你可以克隆子行。

Answer 2

您的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>