2016-07-06 9 views
2

各行に2つのセルを持つHTMLテーブルがあります。テーブルtdとjquery - TRごとに同じTD数を設定します

ドラッグ&ソート「td」でjquery-ui-sortableを使用しますが、残念ながら各行のTD番号が変更される可能性があります。

ソート後、「td」は自動的に並べ替えられ、各行に対して2つになるようにしたいと考えています。あなたは、ソートアクションが終了した後に2の行にでtd要素をグループし直す必要があり、この問題を解決するには

おかげ

$(function() { 
 
    $("#sortable").sortable({items: 'td'}); 
 
    $("#sortable").disableSelection(); 
 
\t 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<table id="sortable"> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
</tr> 
 
<tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
</tr> 
 
<tr> 
 
    <td>5</td> 
 
    <td>6</td> 
 
</tr> 
 
</table>

答えて

1

。私は2番目のクリックをしないまで「停止」「ソート」機能は非アクティブのまま後にそれは完璧に動作しますが、...

$(function() { 
 
    $("#sortable").sortable({ 
 
    items: 'td', 
 
    stop: function() { 
 
     var $table = $('#sortable'); 
 
     var $tds = $table.find('td'); 
 
     $table.empty(); 
 
     for (var i = 0; i < $tds.length; i += 2) { 
 
     $tds.slice(i, i + 2).wrapAll("<tr></tr>").parent().appendTo($table); 
 
     } 
 
    } 
 
    }); 
 
    $("#sortable").disableSelection(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<table id="sortable"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
</table>

+0

:これを試してみてください。 残念ながら、これは私のソフトウェアでのみ表示されています...コードが大きすぎてここに投稿できません –

関連する問題