diff options
| -rw-r--r-- | base.css | 3 | ||||
| -rw-r--r-- | base.js | 13 | ||||
| -rw-r--r-- | index.html | 17 |
3 files changed, 16 insertions, 17 deletions
@@ -6,9 +6,10 @@ body { margin: 20px; } -.cell { +.mc { width: 15px; height: 15px; display: inline-block; + margin-left: 5px; background-color: #000; } @@ -0,0 +1,13 @@ +genMatrix = function(el, m, n) { + for (var i=0; i<m; i++) { + el.append('<div id="r' + i + '" class="mr"></div>'); + var row = $('#r' + i); + for (var j=0; j<n; j++) { + var cell = row.append('<div id="c' + i + j + '" class="mc"></div>'); + } + } +}; + +$(document).ready(function() { + genMatrix($('#viz'), 10, 10); +}); @@ -1,7 +1,7 @@ <!doctype html> <html> <head> - <meta charset="utf-8"></meta> + <meta charset="utf-8"> <script src="jquery.min.js"></script> <script src="base.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.css"> @@ -14,21 +14,6 @@ <input id="val"> <input type="button" class="btn btn-primary" value="Generate"> <div id="viz" class="mat"> - <div id="r1" class="row"> - <div id="c11" class="cell"></div> - <div id="c12" class="cell"></div> - <div id="c13" class="cell"></div> - </div> - <div id="r2" class="row"> - <div id="c21" class="cell"></div> - <div id="c22" class="cell"></div> - <div id="c23" class="cell"></div> - </div> - <div id="r3" class="row"> - <div id="c31" class="cell"></div> - <div id="c32" class="cell"></div> - <div id="c33" class="cell"></div> - </div> </div> </body> </html> |