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
Post a Comment