javascript - How do you create a table using jQuery? -


what i'm trying create table (7 columns , 5 rows) using jquery. days of week (eg. monday, tuesday, etc.)

this html version of i'm trying create in 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> 

i need style background-color 1 color. rest of rows alternating colors. please me solve problem.

this have:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>     $(document).ready(function() {       for(var i=0; < 5; i++) {            for(var j=0; j < 7; j++) {           $("#container").append( "sunday" + "monday" + "tuesday" + "wednesday" + "thursday" + "friday" + "saturday" + );           if (i == 0) {              $("th").css("background-color", "#ccc");           } else if {             $(this).css("background-color", "red");           }         }       }       $("#container").append('</table>');     }); </script> 

here's 1 way...

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);        (var = 0; < rowcount; i++) {          var brow = $('<tr/>');          (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>


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -