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>