は、動的に、私はそれは既存のテーブルのために正常に動作します<pre><code>$("#myTable").dragtable(); </code></pre> <p> </p>以下のようにそれらを並べ替えるために、テーブルの列をドラッグするjQueryプラグインを使用していDOM要素

Question

を作成するためにjqueryのプラグイン機能を取り付けて、私はテーブルの列をドラッグすることができます。しかし、私は動的に行を追加する必要がありますが、私は動的に追加された列をドラッグすることはできません。

.liveメソッドのドキュメントを見ましたが、自分のシナリオでどのように使用するのかよくわかりません。

どのような提案ですか？

Answer 1

この場合、.liveは使用できません。追加する新しい要素ごとに.dragtable()を呼び出すだけです。

このようにあなたが行うことができます

Answer 2

：

$('.defaultTable').dragtable('destroy').dragtable({}); 

全例：

$('.defaultTable').dragtable(); 
 
$('#add-column').click(function(e){ 
 
     var tbody = $('.defaultTable').find('tbody'), 
 
      thead = $('.defaultTable').find('thead'); 
 
      tbody.find('tr').each(function(){ 
 
      var tr = $(this); 
 
      tr.append('<td>Some column</td>'); 
 
      }); 
 
      thead.find('tr').each(function(){ 
 
      var tr = $(this); 
 
      tr.append('<th>appended column header</th>'); 
 
      }); 
 
      $('.defaultTable').dragtable('destroy').dragtable({}); 
 
    });

<link href="https://rawgit.com/akottr/dragtable/master/dragtable.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
 
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script> 
 
<span id="add-column">Add column</span> 
 

 
<table class="defaultTable sar-table"> 
 
     <thead> 
 
      <tr> 
 
      <th>TIME</th> 
 
      <th>%user</th> 
 
      <th>%nice</th> 
 
      <th>%system</th> 
 
      <th>%iowait</th> 
 
      <th>%idle</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody> 
 
      <tr> 
 
      <td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td> 
 
      </tr> 
 
      <tr> 
 
      <td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td> 
 

 
      </tr> 
 
      <tr> 
 
      <td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td> 
 
      </tr> 
 
     </tbody> 
 
     </table>