jqueryを使用してTDを動的に作成し、すべてのデータを印刷します。

Question

制限は3 TRです。データ数で割った数を動的に作成します。 TDのすべてのデータを印刷したいと思います。例えば、12個の要素を持つ場合、3個のTRが生成され、4個のTDが生成されます。私の問題は、すべてのデータを印刷できないことです。すべてのデータを印刷するにはどうすればいいですか？

注：データは固定されていません。それは動的です。それ以外の番号も可能です

ありがとうございます。

$(document).ready(function() { 
      var data = 12; 
      var maxRow = 3 
      var maxCol = (12/3) +1; 
      var table = $("#table tbody"); 
      var ctr = 0; 
      var a = 0; 
      for (var row = 0; row < maxRow; row++) { 
       table.append('<tr></tr>'); 
       var appendRow = $('#table tr:last'); 
       a = a + 1; 
       for (var i = a; i < data; i++) { 
        if (i == 0 || i % maxCol != 0) { 
         appendRow.append('<td>' + i + '</td>'); 
         //ctr++; 
        } 
        if (i == maxCol) 
        { 
         a = i; 
         break; 
        } 
       } 
      } 

     }); 

期待される結果

<table id='table'> 
 
    <tbody> 
 
    <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> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

の代わりに、私はこれを取得することを取得。 my result

Answer 1

コードにいくつかの問題があります。

まず、 maxColは= 4（データ/行）、すなわち12/3

var maxCol = Math.ceil(12/3); // To get the columns to fit the data. 

idata

​​

に等しくなりますされ、ブレーク条件を更新する必要があります。また、それを破るときにtdを追加すると、いくつかの値をスキップします。 iツアーコードに応じてゼロではありませんので

if (i%maxCol == 0) 
{ 
     appendRow.append('<td>' + i + '</td>'); 
     a = i; 
     break; 
} 

i == 0

条件は冗長です。

if (i == 0 || i % maxCol != 0) 

JS Fiddle link