forked from tamilieberman/Pipette-Guide-96
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
220 lines (201 loc) · 15.6 KB
/
index.html
File metadata and controls
220 lines (201 loc) · 15.6 KB
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<script language="JavaScript">
<!--
var wellorder = [38,78,1,0,80,37,21,16,82,81,27,28,84,10,92,72,4,68,51,36,19,3,2,93,79,74,66,90,87,55,47,45,7,58,40,94,75,25,59,52,23,8,76,57,44,33,13,91,83,70,56,50,39,31,26,6,67,60,9,86,61,54,22,77,69,46,24,14,53,12,62,15,43,85,34,49,30,89,73,17,11,95,88,5,18,35,48,71,41,42,29,64,63,65,32,20];
function register(well) {
row=Math.floor(well/12)
column=well-(row*12)
newregister=(13*(row+1))+column+1;
}
function changeBGC(well) {
var x = document.getElementById("mytable").getElementsByTagName("td");
register(well)
x[newregister].style.backgroundColor ="black";
var idx=wellorder.indexOf(well);
wellorder.splice(idx, 1)
register(wellorder[0])
x[newregister].style.backgroundColor ="yellow";
}
//-->
</script>
<html lang="en">
<head>
</head>
<style>
div
{
text-align: center;
text-indent: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-size: x-large;
vertical-align:top;
}
td.td
{
border-width : 1px;
text-align:center;
vertical-align:top;
}
td.border-side {
text-align:center;
border-left: solid 8px red;
vertical-align:top;
}
td.border-bottom {
text-align:center;
border-bottom : solid 8px red;
vertical-align:top;
}
td.column-label {
text-align:center;
border-bottom : solid 8px red;
vertical-align:top;
font-size: x-large;
}
td.row-label {
text-align:center;
border-right : solid 8px red;
vertical-align:top;
font-size: x-large;
}
td.border-both {
text-align:center;
border-bottom : solid 8px red;
border-left: solid 8px red;
vertical-align:top;
}
</style>
<body>
<div>
<table id = "mytable" width="100%" border="1" cellpadding="1" cellspacing="2" style="background-color: #FFFFFF;text-align:center;font-size: xx-large;">
<tr valign="top">
<td class = "td" style="background-color:rgb(255,255,255)" > </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 1 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 2 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 3 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 4 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 5 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 6 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 7 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 8 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 9 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 10 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 11 </td>
<td class = "column-label" style="background-color:rgb(255,255,255)" > 12 </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > A </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(0)">11.1</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(1)">11.3</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(2)">7.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(3)">7.0</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(4)">7.2</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(5)">4.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(6)">5.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(7)">6.5</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(8)">6.1</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(9)">5.6</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(10)">7.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(11)">4.8</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > B </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(12)">5.3</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(13)">5.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(14)">5.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(15)">5.2</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(16)">7.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(17)">4.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(18)">4.6</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(19)">7.0</a> </td>
<td class = "border-side" style="background-color:rgb(0,0,0);" > <a href="#" onClick="javascript:changeBGC(20)">0.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(21)">7.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(22)">5.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(23)">6.1</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > C </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(24)">5.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(25)">6.2</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(26)">5.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(27)">7.7</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(28)">7.6</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(29)">3.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(30)">4.9</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(31)">5.7</a> </td>
<td class = "border-side" style="background-color:rgb(0,0,0);" > <a href="#" onClick="javascript:changeBGC(32)">0.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(33)">5.9</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(34)">5.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(35)">4.5</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > D </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(36)">7.0</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(37)">8.0</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(38)">13.6</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(39)">5.7</a> </td>
<td class = "border-both" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(40)">6.4</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(41)">4.3</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(42)">3.8</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(43)">5.1</a> </td>
<td class = "border-both" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(44)">6.0</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(45)">6.5</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(46)">5.4</a> </td>
<td class = "border-bottom" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(47)">6.5</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > E </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(48)">4.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(49)">4.9</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(50)">5.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(51)">7.1</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(52)">6.1</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(53)">5.3</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(54)">5.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(55)">6.5</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(56)">5.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(57)">6.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(58)">6.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(59)">6.1</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > F </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(60)">5.6</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(61)">5.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(62)">5.2</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(63)">2.9</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(64)">3.1</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(65)">1.9</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(66)">6.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(67)">5.6</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(68)">7.1</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(69)">5.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(70)">5.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(71)">4.3</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > G </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(72)">7.2</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(73)">4.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(74)">6.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(75)">6.3</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(76)">6.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(77)">5.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(78)">12.6</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(79)">6.8</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(80)">8.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(81)">7.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(82)">7.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(83)">5.7</a> </td>
<tr valign="top">
<td class = "row-label" style="background-color:rgb(255,255,255)" > H </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(84)">7.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(85)">5.0</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(86)">5.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(87)">6.5</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(88)">4.7</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(89)">4.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(90)">6.5</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(91)">5.7</a> </td>
<td class = "border-side" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(92)">7.4</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(93)">6.8</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(94)">6.3</a> </td>
<td class = "td" style="background-color:rgb(255,255,255);" > <a href="#" onClick="javascript:changeBGC(95)">4.7</a> </td>
</tr>
</table>
</div>
</body>
</html>