2013-01-17 293 views
1

創建各種數量的<td>標籤與用下面的代碼的各種內容:爲每個x元素添加元素?

for (var i = 0 - dOW; i < dIM; i++) { 
    var day = i + 1; 
    if (day > 0) { 
     if (day === d) { 
      $("#calendar").append("<td>[" + day + "]</td>"); 
     } else { 
      $("#calendar").append("<td>" + day + "</td>"); 
     } 
    } else { 
     $("#calendar").append("<td>s</td>"); 
    } 
} 

其與結果:

SS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 [16] 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

有一種方法,以在一個<tr>標籤每7個元件包裹,使得HTML將是:

<tr> 
    <td>s</td> 
    <td>s</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
... 

全碼:

function calendar(d){ 
    var t = new Date(d);      // Today [Wed Jan 16 2013 00:00:00 GMT-0500 (EST)] 
    var d = t.getDate();      // Today's date (1-31) [16] 
    var y = t.getFullYear();     // Full year [2013] 
    var m = t.getMonth();      // Month (0-11) [0] 
    var mN = [         // Month name array (0-11) 
       "January", 
       "February", 
       "March", 
       "April", 
       "May", 
       "June", 
       "July", 
       "August", 
       "September", 
       "October", 
       "November", 
       "December" 
       ]; 
    var fM = mN[m];        // Full month name [January] 
    var dIM = new Date(y, m + 1, 0).getDate(); // Number of days in current month (1-31) [31] 
    var dOW = new Date(y, m, 1).getDay();  // Day of the first day of the month (0-6) [2] 
    var nOW = Math.ceil((dIM + dOW)/7);  // Number of weeks in the month, including space [5] 


      for (var i = 0 - dOW; i < dIM; i++){ 
       var day = i + 1; 
       if (day > 0){ 
        if (day === d){ 
         $("#calendar").append("<td>[" + day + "]</td>"); 
        } else { 
         $("#calendar").append("<td>" + day + "</td>"); 
        } 
       } else { 
        $("#calendar").append("<td>s</td>"); 
       } 
      } 

    } 


// "1 March 2013" 
calendar(new Date()); 

到目前爲止,我已經試過了分成兩個for循環,一個設立的行數,其他設置爲列,但沒」牛逼允許我使用if聲明,讓我把在間隔DIV:

if (day === d) { 
     $("#calendar").append("<td>[" + day + "]</td>"); 
    } else { 
     $("#calendar").append("<td>" + day + "</td>"); 
    } 

回答

5

而不是創建所有<td>年代後創建<tr> S的,可我建議在個這兩項工作同一時間?

var count = 0, $row; 

for (var i = 0 - dOW; i < dIM; i++) { 
    var day = i + 1; 
    if (count % 7 === 0) { 
     $row = $('<tr />').appendTo('#calendar'); 
    } 
    if (day > 0) { 
     if (day === d) { 
      $row.append("<td>[" + day + "]</td>"); 
     } else { 
      $row.append("<td>" + day + "</td>"); 
     } 
    } else { 
     $row.append("<td>s</td>"); 
    } 
    count++; 
} 
+0

然而,對於每一個元素創建一個新的行:http://jsfiddle.net/charlescarver/4upXZ/ – Charlie

+0

是的,對不起。我忘了每次增加計數。它現在已經修復了,我更新了你的小提琴:http://jsfiddle.net/M3n4H/ –

1

這裏是一個代碼:

var arr=$("#calendar").val(); 
var htmlCode=""; 
int length=arr.length; 
for(var i=0;i<length/7;i++) 
{ 
    htmlCode+="<tr>"; 
    for(var j=i*7;j<i*7 + 7 ; j++) 
    { 
     htmlCode+="<td>"+arr[j]+"</td>"; 
    } 
    htmlCode+="</tr>"; 
} 
2

使用嵌套的for循環。

var dynamicTable= '<table cellspacing="10"'; 
for (i = 0; i < 10; i ++) 
{ 
    dynamicTable+= "<tr>"; 
    var row = i; 
    row += 1; 
    for (j = 0; j < 10; j++) 
    { 
     var col = j; 
     col += 1; 
     dynamicTable += '<td>'; 
       dynamicTable += "x";// cell text 
     dynamicTable += '</td>'; 
    } 
    dynamicTable += '</tr>'; 
} 
dynamicTable+= '</table>';