Project-3/test-table.html at main · SystemDesignGroup14/Project-3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Project 3, Problem 2</title>
    <link rel="stylesheet" type="text/css" href="test-table.css" />
    <script src="./template-processor.js"></script>
    <script src="./TableTemplate.js"></script>
  </head>
  <body>
    <h1>TableTemplate Tests</h1>
    <p>Your filled in tables should appear here:</p>
    <table style="visibility:hidden;" id="table1" class="example" cellspacing="0">
      <tr>
        <td>{{PartNumber}}</td>
        <td>{{Length}}</td>
      </tr>
      <tr><td>{{n14926}}</td><td>{{n47}}</td></tr>
      <tr><td>{{n773}}</td><td>{{n3_5}}</td></tr>
      <tr><td>{{n9318}}</td><td>{{n10}}</td></tr>
      <tr><td>{{n3045}}</td><td>{{n4}}</td></tr>
    </table>
    <table style="visibility:hidden;" id="table2" class="example" cellspacing="0">
      <tr>
        <td>{{PartNumber}}</td>
        <td>{{Length}}</td>
      </tr>
      <tr><td>{{n14926}}</td><td>{{n47}}</td></tr>
      <tr><td>{{n773}}</td><td>{{n3_5}}</td></tr>
      <tr><td>{{n9318}}</td><td>{{n10}}</td></tr>
      <tr><td>{{n3045}}</td><td>{{n4}}</td></tr>
    </table>
    <table style="visibility:hidden;" id="table3" class="example" cellspacing="0">
      <tr>
        <td>{{PartNumber}}</td>
        <td>{{Length}}</td>
      </tr>
      <tr><td>{{n14926}}</td><td>{{n47}}</td></tr>
      <tr><td>{{n773}}</td><td>{{n3_5}}</td></tr>
      <tr><td>{{n9318}}</td><td>{{n10}}</td></tr>
      <tr><td>{{n3045}}</td><td>{{n4}}</td></tr>
    </table>
    <p>and should look like:</p>
    <table class="example" cellspacing="0">
      <tr>
        <td>Part Number</td>
        <td>Length</td>
      </tr>
      <tr><td>{{n14926}}</td><td>47</td></tr>
      <tr><td>{{n773}}</td><td>3.5</td></tr>
      <tr><td>{{n9318}}</td><td>10</td></tr>
      <tr><td>{{n3045}}</td><td>4</td></tr>
    </table>

    <table class="example" cellspacing="0">
      <tr>
        <td>Part Number</td>
        <td>Length</td>
      </tr>
      <tr><td>14926</td><td>{{n47}}</td></tr>
      <tr><td>773</td><td>{{n3_5}}</td></tr>
      <tr><td>9318</td><td>{{n10}}</td></tr>
      <tr><td>3045</td><td>{{n4}}</td></tr>
    </table>

    <table class="example" cellspacing="0">
      <tr>
        <td>Part Number</td>
        <td>Length</td>
      </tr>
      <tr><td>14926</td><td>47</td></tr>
      <tr><td>773</td><td>3.5</td></tr>
      <tr><td>9318</td><td>10</td></tr>
      <tr><td>3045</td><td>4</td></tr>
    </table>


    <script type="text/javascript">
      // <![CDATA[
      'use strict';

      /* global TableTemplate */

      (function patchTable() {
        var dict = {
          PartNumber: 'Part Number',
          Length: 'Length',
          n14926: '14926',
          n47: '47',
          n773: '773',
          n3_5: '3.5',
          n9318: '9318',
          n10: '10',
          n3045: '3045',
          n4: '4',
        };

        // fill in second column
        TableTemplate.fillIn('table1', dict, 'Length');

        // fill in first column
        TableTemplate.fillIn('table2', dict, 'Part Number');

        // no column name passed in
        TableTemplate.fillIn('table3', dict);
      }());
      // ]]>
    </script>
  </body>
</html>