排序，以擴展表添加

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>