render table

8 years ago · dd22adce37
parent 3e101778cd
commit dd22adce37
3 changed files with 31 additions and 0 deletions
--- a/app.css
+++ b/app.css
@ -7,4 +7,13 @@ circle {
 }
 svg {
     overflow: visible;
+     margin-bottom: 50px;
+ }
+
+ table, th, td {
+    border: 1px solid black;
+ }
+ th, td {
+     padding:10px;
+     text-align: center;
 }
--- a/app.js
+++ b/app.js
@ -63,3 +63,14 @@ var leftAxis = d3.axisLeft(yScale);
 d3.select('svg')
 	.append('g')
 	.call(leftAxis);
+
+var createTable = function(){
+    for (var i = 0; i < runs.length; i++) {
+        var row = d3.select('tbody').append('tr');
+        row.append('td').html(runs[i].id);
+        row.append('td').html(runs[i].date);
+        row.append('td').html(runs[i].distance);
+    }
+}
+
+createTable();
--- a/index.html
+++ b/index.html
@ -7,6 +7,17 @@
    </head>
    <body>
        <svg></svg>
+        <table>
+            <thead>
+                <tr>
+                    <th>id</th>
+                    <th>date</th>
+                    <th>distance</th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="app.js" charset="utf-8"></script>
    </body>