2017-02-26 43 views
0

限制爲3 TR。動態創建一個TD數除以數據的數量。我想在TD中打印所有數據。所以,例如有12個元素,然後3個TR將會產生,4個TD。我的問題是我無法打印所有的數據。我怎樣才能打印所有數據?使用jquery動態創建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

回答

0

你的代碼有一些問題。

首先。 MAXCOL將(數據/行),即12/3 = 4

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

i將去等於data

​​

斷點條件需要被更新。另外,在破壞時附加td,否則會跳過一些值。

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

i == 0條件是多餘的,因爲根據遊碼i將永遠不會是零。

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

JS Fiddle link

+0

嗯,這似乎是正確的,當數據是由3整除但如果數據的總數不被3整除是什麼?我認爲它不會打印所有的數字。 – megatron

+0

@megatron您將不得不根據您的需要修改代碼。您可以將任何數量的數據放入任何表格中。如果數據的大小不正確,只有一些單元格將爲空。 – Ayush