2

.after() メソッドを使用して、4 番目の要素ごとに新しい行を開始しようとしています。
私のロジックは、行タグを閉じて、4 番目の要素の後に行を開始することです。行を閉じて新しい行を開始する代わりに、新しい空の行が作成されています。

ここにフィドルファイルがありますhttp://jsfiddle.net/b4xhG/1/

Jクエリコード

   $("#table td:nth-child(4n)").after("</tr>  <tr>");

こんな感じで表示されます

<table id="table" border="1px" width="500px">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
</table>

これが表示方法です。

<table id="table" border="1px" width="500px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td> 
        </tr>
</table>
4

4 に答える 4

4

"</tr><tr>"を使用して無効/不完全な HTML フラグメント (例: ) を挿入することはできませんafter()。

ただし、次のようにすることができます。

while($("#table td:nth-child(4n)").nextAll().length > 0) {
    $('<tr/>').append($("#table td:nth-child(4n)").nextAll()).appendTo('#table');    
}

ワーキングデモ

于 2013-05-20T16:57:28.480 に答える
1 
var $td = $("#table td");

$td.each(function(i) {
    if (i % 4 === 0) {
        $td.slice(i, i+4).wrapAll('<tr/>');
    }
}).parent('tr').unwrap();

http://jsfiddle.net/ZyFUU/

于 2013-05-20T17:00:39.917 に答える
0

別の可能な解決策 ( DEMO ):

$('#table td:nth-child(4n)').each(function() { 
    $('<tr>').html($(this).nextAll()).appendTo('#table tbody');
});
于 2013-05-20T17:26:30.203 に答える
0

2 つの選択肢があります。

while($('#table').find('tr:last').children(':gt(3)').length > 0){
   $('#table').find('tr:last').after(
       $('#table').find('tr:last').children(':gt(3)')
           .wrapAll('<tr></tr>').parent().remove()
   );
}

Jsfiddle デモ: http://jsfiddle.net/darkajax/MFTSU/

と：

while($('#table').find('tr:last').children(':gt(3)').length > 0){
   var newRow = '';
   $('#table').find('tr:last').children(':gt(3)').each(function(i,e){
      newRow += $(e).prop('outerHTML');
   }).remove();
   $('#table').find('tr:last').after('<tr>' + newRow + '</tr>');
}

Jsfiddle デモ: http://jsfiddle.net/darkajax/YgAMd/

于 2013-05-20T17:29:48.033 に答える