.insertAfter変数の文字列を並べ替える

Question

私は古いコードを書きますが、cssとjavascriptにアクセスできる外部システムで作業しています。私は個々の行、場合によっては最大30行に各項目を書き込む表を使って作業しています。私はtrの6列5項目に分割する必要があります。

各trのスタイルを表示するように変更する予定でした。table-cellは、水平方向にリストを作成します。次に、5行ごとにクラスを追加します。その後、5th trごとにtbodyとtableタグの終わりと先頭に追加されたクラスを挿入して、5 trごとに個別の表を作成します。したがって、5つのtrがそれぞれ独自のテーブルに存在し、5の行を作成するように強制します。

すべてが.insertAfterを除いて動作します。私は</tbody></table><table class='tableBreaker'><tbody>を5 trごとに挿入する必要がありますが、コードを逆にして<table class="tableBreaker"><tbody></tbody></table>と書いています。

.insertAfterのjquery文字列を書き換えることについての情報が見つかりません。

表のHTML：

<table id="mainContent_rbl_zoneList" class="tnew-selectseating-form-zone-radio"> 
<tbody> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_0" type="radio" name="ctl00$mainContent$rbl_zoneList" value="151" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$0\',\'\')', 0)"><label for="mainContent_rbl_zoneList_0">&nbsp;10:15</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_1" type="radio" name="ctl00$mainContent$rbl_zoneList" value="152" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$1\',\'\')', 0)"><label for="mainContent_rbl_zoneList_1">&nbsp;10:30</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_2" type="radio" name="ctl00$mainContent$rbl_zoneList" value="153" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$2\',\'\')', 0)"><label for="mainContent_rbl_zoneList_2">&nbsp;10:45</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_3" type="radio" name="ctl00$mainContent$rbl_zoneList" value="154" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$3\',\'\')', 0)"><label for="mainContent_rbl_zoneList_3">&nbsp;11:00</label></td> 
    </tr><tr> 
     <td><input id="mainContent_rbl_zoneList_4" type="radio" name="ctl00$mainContent$rbl_zoneList" value="155" checked="checked"><label for="mainContent_rbl_zoneList_4">&nbsp;11:15</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_5" type="radio" name="ctl00$mainContent$rbl_zoneList" value="156" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$5\',\'\')', 0)"><label for="mainContent_rbl_zoneList_5">&nbsp;11:30</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_6" type="radio" name="ctl00$mainContent$rbl_zoneList" value="157" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$6\',\'\')', 0)"><label for="mainContent_rbl_zoneList_6">&nbsp;11:45</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_7" type="radio" name="ctl00$mainContent$rbl_zoneList" value="158" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$7\',\'\')', 0)"><label for="mainContent_rbl_zoneList_7">&nbsp;12:00</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_8" type="radio" name="ctl00$mainContent$rbl_zoneList" value="159" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$8\',\'\')', 0)"><label for="mainContent_rbl_zoneList_8">&nbsp;12:15</label></td> 
    </tr> 
    <tr> 
     <td><input id="mainContent_rbl_zoneList_9" type="radio" name="ctl00$mainContent$rbl_zoneList" value="160" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$9\',\'\')', 0)"><label for="mainContent_rbl_zoneList_9">&nbsp;12:30</label></td> 
    </tr> 
</tbody> 
</table> 

CSS：

table#mainContent_rbl_zoneList tr { 
    display: table-cell; 
} 

のjQuery：

$("#mainContent_rbl_zoneList.tnew-selectseating-form-zone-radio tr").each(function (index) { 
    index += 1; 
    if(index % 5 == 0) { 
    $(this).addClass("breakRow"); 
    } 
}); 

var tableBreaker = "</tbody></table><table class='tableBreaker'><tbody>"; 
$(tableBreaker).insertAfter('tr.breakRow'); 

Answer 1

この機能は、新しいテーブル（s）は古いテーブルを移動するrowCount行を移動する必要があり、アカウントに行クラスを取ることはありません

var $container = $('#mainContent_rbl_zoneList'), 
    $rows = $('#mainContent_rbl_zoneList tr'); 

for(var i=0; i < $rows.length; i = i+5){ 
    var $newTable = $('<table>'), $tbody = $('<tbody>'); 
    $rows.slice(i, i+5).appendto($tbody); 
    $newTable.append($tbody).appendTo($container);  

} 

クラスを新しいクラスに追加します。

function movem(rowCount) { 
    var oldTable = $('#mainContent_rbl_zoneList'), 
    holder = oldTable.parent().eq(0), 
    rows = oldTable.find('tr'); 
    var classes = oldTable.prop("classList"); 
    var temptable = $('<table>'); 
    $.each(classes, function(index, value) { 
    temptable.addClass(value); 
    }); 
    for (var i = 0; i < rows.length; i = i + rowCount) { 
    var newTable = temptable.clone(), 
     tbody = $('<tbody>'); 
    rows.slice(i, i + 5).appendTo(tbody); 
    newTable.append(tbody).appendTo(holder); 
    } 
    oldTable.remove(); 
} 
movem(5); 

これは古いテーブルにバインドされたイベントハンドラを持っている場合、あなたはそれを考慮して必要となる問題が発生する場合があります。

OLDテーブルの親コンテナの末尾にNEWテーブルを適用したことに注意してください。 CSSを修正するには

、あなたも行う可能性があります：一緒にプレイする

temptable.addClass("rowcontainer"); 

と

.rowcontainer tr { 
    display: table-cell; 
} 

サンプル：https://jsfiddle.net/n3nqespn/

Answer 2

あなたが最終的にあなたのinsertAfterをどうしようとしているものので、あなたが実際にする新しいテーブルを作成することですそれだけで行を新しいテーブルに移動する必要があります

何かのように：これはちょうど出て荒れていると