Как создать таблицу с помощью jQuery?

Question

Я пытаюсь создать таблицу (7 столбцов и 5 строк), используя только jQuery. Дни недели (например, понедельник, вторник и т.д.).

Это HTML версия о том, что я пытаюсь создать в JQuery:

<table id="table"> 
    <tr> 
    <th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th> 
    </tr> 
    <tr> 
    <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
    </tr> 
    <tr> 
    <td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td> 
    </tr> 
    <tr> 
    <td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td> 
    </tr> 
    <tr> 
    <td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td> 
    </tr> 

Мне также нужно стилизовать background-color все один цвет. Затем остальные строки чередуются друг с другом. Пожалуйста, помогите мне решить эту проблему.

Это то, что у меня есть:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     for(var i=0; i < 5; i++) { 



     for(var j=0; j < 7; j++) { 
      $("#container").append("Sunday" + "Monday" + "Tuesday" + "Wednesday" + "Thursday" + "Friday" + "Saturday" + i); 
      if (i == 0) { 

      $("th").css("background-color", "#ccc"); 
      } else if { 
      $(this).css("background-color", "red"); 
      } 
     } 
     } 
     $("#container").append('</table>'); 
    }); 
</script> 

Answer 1

Вот один из способов ...

var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], 
 
    rowCount = 4; 
 

 
$(document).ready(function() { 
 
    var table = $('<table/>'), 
 
     head = $('<thead/>'), 
 
     body = $('<tbody/>'), 
 
     headrow = $('<tr/>'); 
 

 
    $.each(days, function(index, day) { 
 
     headrow.append('<th>' + day + '</th>'); 
 
    }); 
 
    head.append(headrow); 
 

 
    for (var i = 0; i < rowCount; i++) { 
 
     var bRow = $('<tr/>'); 
 
     for (var j = 0; j < days.length; j++) { 
 
      bRow.append('<td>' + (i + 1) + '</td>'); 
 
     } 
 
     body.append(bRow); 
 
    } 
 
    table.append(head).append(body).appendTo('body'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

здесь и можно упростить:

dayOfTheWeek = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; 
str = '<table>'; 
for(i=0;i<6;i++) 
{ 
    var s = ''; 
    t1='<tr>'; 
    t2='</tr>'; 
    for(j=0;j<dayOfTheWeek.length;j++) 
    { 
     t3 = i; 
     if (i==0) 
     { 
      t1='<th>'; t2='</th>'; t3 = dayOfTheWeek[j]; 
     } 
     s+= '<td>'+t3+'</td>'; 
    } 
    s = t1+s+t2; 
    str += s; 
} 
str+='</table>'; 

$(str).appendTo($('#container'));