Jqueryを使用して、</tr>タグとオープニング<tr>タグをダイナミックテーブル内に挿入できますか？

Question

私は3つのセルごとに新しい行を作成するように、次のコードを使用して、終了タグを動的に追加して開きます。ほとんどの場合、DOMインスペクタはTRノードを表示しますが、問題はtrがtrタグを閉じていないことです。私はJqueryを初めて使っていますが、私はこのコードを間違っていますか？

  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('td:nth-child(3n)').after('</tr><tr>'); 
     }); 
     </script> 

     <table id="mytable" width="266" border="1" cellspacing="10" cellpadding="10"> 
     <tbody> 
      <tr> 
     <?php 
     function somelongassfunction(){ 
      return 'Hello'; 
      } 
     function have_products($a){ 
      return $a<=20; 
      } 
     $x=0; 
     while (have_products($x)) { 
      echo '<td>' . somelongassfunction() . '</td>'; 
      $x++; 
     //------------------------------------- 
     /*if (fmod($x,3) == 0) { 
         echo '</tr><tr>'; 
         continue; 
         }*/ 
     //--------------------------------------      
     if ($x==20){ 
      break; 
      } 
     } 
     ?> 
     </tr> 
     </tbody> 
     </table>  

Answer 1

DOM選択をHTMLドキュメントのように扱うことはできません。 DOMドキュメントは、タグではなくノードの階層です。あなたのHTMLのタグは、であり、ブラウザによってDOM文書にパースされます。です。 HTMLの単一ビットを追加してから、それを解析してDOM構造に戻すことはできません。

代わりに、jQueryでラッピングする必要があります。これは実行可能なアプローチです。最も効率的ではありません。

$('td').each(function(idx) { 
    if (idx % 3) { 
     return; 
    } else { 
     $(this).nextAll(':lt(2)').andSelf().wrapAll('<tr/>'); 
    } 
}).parent().unwrap(); 

jsFiddle

Answer 2

別のアプローチは、detach全てtd要素であり、その後spliceを使用して3のグループにそれらを分割：

var td = $('tr td').detach(); 
$('tr').remove(); 
while(td.length>0){ 
$(td.splice(0,3)).wrapAll('<tr />').parent().appendTo('tbody'); 
} 

例：http://jsfiddle.net/niklasvh/C6unV/

Answer 3

lonesomedayが言ったようにDOMをHTMLのように扱うことはできません。また、TR closing tags are optionalのように、TRを挿入してマークアップを挿入すると、ブラウザはそれを閉じます。終了タグは必要ありません。