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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
|
<HTML>
<HEAD>
<SCRIPT>
var count = 1;
function genName(prefix) {
return "X" + count++ + "\n";
}
function insertCaption() {
var table = document.getElementsByTagName("TABLE")[0];
var caption = document.createElement("CAPTION", null);
var text = document.createTextNode("here is the new caption text\n");
caption.appendChild(text);
table.appendChild(caption);
}
function deleteCaption() {
var table = document.getElementsByTagName("TABLE")[0];
var caption = document.getElementsByTagName("CAPTION")[0];
table.removeChild(caption);
}
function changeCaptionStyle() {
var caption = document.getElementsByTagName("CAPTION")[0];
caption.align="bottom";
dump("SCRIPT: changed caption align to bottom\n");
}
function changeTableStyle() {
var table = document.getElementsByTagName("TABLE")[0];
table.width="600";
dump("SCRIPT: changed table width to 600\n");
}
function insertColGroup() {
var table = document.getElementsByTagName("TABLE")[0];
var refColGroup = document.getElementsByTagName("COLGROUP")[0];
var colGroup = document.createElement("COLGROUP", null);
colGroup.width=100;
colGroup.span=1;
table.insertBefore(colGroup, refColGroup);
dump("SCRIPT: inserted COLGROUP with span=1 width=200 as first colgroup in table\n");
}
function appendColGroup() {
var table = document.getElementsByTagName("TABLE")[0];
var colGroup = document.createElement("COLGROUP", null);
colGroup.width=300;
colGroup.span=1;
table.appendChild(colGroup);
dump("SCRIPT: appended COLGROUP with span=1 width=300\n");
}
function deleteColGroup() {
var table = document.getElementsByTagName("TABLE")[0];
var colGroup = document.getElementsByTagName("COLGROUP")[0];
table.removeChild(colGroup);
dump("SCRIPT: deleted first COLGROUP\n");
}
function changeColGroupStyle() {
var colGroup = document.getElementsByTagName("COLGROUP")[0];
colGroup.width="200";
dump("SCRIPT: changed default width for first COLGROUP to 200\n");
}
function insertCol() {
var table = document.getElementsByTagName("TABLE")[0];
var refCol = table.getElementsByTagName("COL")[0];
var col = document.createElement("COL", null);
col.width=200;
col.span=1;
table.insertBefore(col, refCol);
dump("SCRIPT: inserted COL with span=1 width=200 as first col in first col group\n");
}
function appendCol() {
var table = document.getElementsByTagName("TABLE")[0];
var col = document.createElement("COL", null);
table.appendChild(col);
dump("SCRIPT: appended COL with span=1 width=300\n");
}
function deleteCol() {
var table = document.getElementsByTagName("TABLE")[0];
var col = document.getElementsByTagName("COL")[0];
table.removeChild(col);
dump("SCRIPT: deleted first COL in first COLGROUP\n");
}
function changeColStyle() {
var col = document.getElementsByTagName("COL")[0];
col.width="200";
dump("SCRIPT: changed default width for first COL to 200\n");
}
function insertRowGroup() {
var table = document.getElementsByTagName("TABLE")[0];
var refRowGroup = document.getElementsByTagName("TBODY")[0];
var rowGroup = document.createElement("TBODY", null);
table.insertBefore(rowGroup, refRowGroup);
dump("SCRIPT: inserted empty ROWGROUP as first rowgroup in table\n");
}
function appendRowGroup() {
var table = document.getElementsByTagName("TABLE")[0];
var rowGroup = document.createElement("TBODY", null);
table.appendChild(rowGroup);
dump("SCRIPT: appended empty ROWGROUP\n");
}
function appendRowGroupWithContent() {
dump("\nSCRIPT: starting appendRowGroupWithContent\n");
var table = document.getElementsByTagName("TABLE")[0];
var rowGroup = document.createElement("TBODY", null);
var row = document.createElement("TR", null);
var cell = document.createElement("TD", null);
var text = document.createTextNode("here is content in the cell from the script appendRowGroupWithContent\n");
cell.appendChild(text);
row.appendChild(cell);
rowGroup.appendChild(row);
table.appendChild(rowGroup);
dump("SCRIPT: appended ROWGROUP with 1 row and 1 cell\n");
}
function deleteRowGroup() {
var table = document.getElementsByTagName("TABLE")[0];
var rowGroup = document.getElementsByTagName("TBODY")[0];
table.removeChild(rowGroup);
dump("SCRIPT: deleted first ROWGROUP\n");
}
function changeRowGroupStyle() {
var rowGroup = document.getElementsByTagName("TBODY")[0];
rowGroup.align="right";
dump("SCRIPT: changed default align for first ROWGROUP to right\n");
}
function insertRow() {
var rg = document.getElementsByTagName("TBODY")[0];
var refRow = document.getElementsByTagName("TR")[0];
var row = document.createElement("TR", null);
rg.insertBefore(row, refRow);
dump("SCRIPT: inserted empty ROW as first row in first rowgroup in table\n");
}
function appendRow() {
var rg = document.getElementsByTagName("TBODY")[0];
var row = document.createElement("TR", null);
rg.appendChild(row);
dump("SCRIPT: appended empty ROW in first ROWGROUP\n");
}
function appendRowWithContent() {
dump("\nSCRIPT: starting appendRowWithContent\n");
var rg = document.getElementsByTagName("TBODY")[0];
var row = document.createElement("TR", null);
var cell = document.createElement("TD", null);
var text = document.createTextNode(genName());
cell.appendChild(text);
row.appendChild(cell);
rg.appendChild(row);
dump("SCRIPT: appended ROW with 1 cell in first ROWGROUP\n");
}
function insertRowWithContent() {
dump("\nSCRIPT: starting appendRowWithContent\n");
var rg = document.getElementsByTagName("TBODY")[0];
var cell = document.createElement("TD", null);
var text = document.createTextNode(genName());
cell.appendChild(text);
row = rg.insertRow(0);
row.appendChild(cell);
dump("SCRIPT: inserted ROW with 1 cell in first ROWGROUP\n");
}
function setRowIndex() {
dump("\nSCRIPT: starting setRowIndex\n");
var row = document.getElementsByTagName("TR")[0];
row.rowIndex = 99;
dump("SCRIPT: ending setRowindex - placed 1st row at end\n");
}
function setSectionRowIndex() {
dump("\nSCRIPT: starting setSectionRowIndex\n");
var row = document.getElementsByTagName("TR")[0];
row.sectionRowIndex = 99;
dump("SCRIPT: ending setSectionRowindex - placed 1st row at end\n");
}
function deleteRow() {
var rg = document.getElementsByTagName("TBODY")[0];
//var row = document.getElementsByTagName("TR")[0];
rg.deleteRow(0);
dump("SCRIPT: deleted first ROW in first ROWGROUP\n");
}
function changeRowStyle() {
var row = document.getElementsByTagName("TR")[0];
row.vAlign="top";
dump("SCRIPT: changed default align for first ROW to right\n");
}
// why doesn't this cell show up
function insertCellNew() {
var row = document.getElementsByTagName("TR")[0];
var cell = row.insertCell(0);
var text = document.createTextNode(genName());
cell.appendChild(text);
dump("SCRIPT: inserted CELL as first cell in first row\n");
}
function insertCell() {
var row = document.getElementsByTagName("TR")[0];
var refCell = document.getElementsByTagName("TD")[0];
var cell = document.createElement("TD", null);
var text = document.createTextNode(genName());
cell.colSpan=2;
cell.appendChild(text);
row.insertBefore(cell, refCell);
dump("SCRIPT: inserted CELL as first cell in first row\n");
}
function appendCell() {
var row = document.getElementsByTagName("TR")[0];
var cell = document.createElement("TD", null);
var text = document.createTextNode(genName());
cell.appendChild(text);
row.appendChild(cell);
dump("SCRIPT: appended CELL in first ROW\n");
}
function deleteCell() {
var row = document.getElementsByTagName("TR")[0];
row.deleteCell(0);
dump("SCRIPT: deleted first CELL in first ROW\n");
}
function deleteCellBack() {
var row = document.getElementsByTagName("TR")[0];
var cell = document.getElementsByTagName("TD")[0];
row.removeChild(cell);
dump("SCRIPT: deleted first CELL in first ROW\n");
}
function changeCellStyle() {
var cell = document.getElementsByTagName("TD")[0];
cell.width=400;
dump("SCRIPT: changed width for first CELL to 400\n");
}
function setCellIndex() {
dump("\nSCRIPT: starting setCellIndex\n");
var cell = document.getElementsByTagName("TD")[0];
cell.cellIndex = 99;
dump("SCRIPT: ending setCellIndex - placed 1st cell at end\n");
}
function AddALot() {
dump("\nSCRIPT: starting AddALot\n");
var table = document.getElementsByTagName("TABLE")[0];
var rowGroup = document.createElement("TBODY", null);
var row = document.createElement("TR", null);
var row1 = document.createElement("TR", null);
var cell1 = document.createElement("TD", null);
var cell2 = document.createElement("TD", null);
var cell3 = document.createElement("TD", null);
var cell4 = document.createElement("TD", null);
var text1 = document.createTextNode("cell1\n");
var text2 = document.createTextNode("cell2\n");
var text3 = document.createTextNode("cell3 has the most content, and will be the tallest cell in the row\n");
var text4 = document.createTextNode("cell4\n");
cell1.appendChild(text1); cell2.appendChild(text2);
cell3.appendChild(text3); cell4.appendChild(text4);
row.appendChild(cell3); row.appendChild(cell4);
row.insertBefore(cell2, cell3); row.insertBefore(cell1, cell2);
row1.appendChild(cell2); row1.appendChild(cell1);
row1.insertBefore(cell3, cell2); row1.insertBefore(cell4, cell3);
rowGroup.appendChild(row);
rowGroup.appendChild(row);
rowGroup.appendChild(row1);
rowGroup.appendChild(row1);
table.appendChild(rowGroup);
dump("SCRIPT: finished adding\n");
}
</SCRIPT>
</HEAD>
<BODY>
delete removes the first object of [type].
<table width=150 border>
<tbody>
<tr>
<td>existing cell</td>
</tr>
</tbody>
</table>
<p>
<form>
<INPUT TYPE="button" NAME="Ins Caption" VALUE="InsertCaption" onClick="insertCaption()" width=100>
<INPUT TYPE="button" NAME="Del Caption" VALUE="DeleteCaption" onClick="deleteCaption()" width=100>
<br>
<INPUT TYPE="button" NAME="Ins ColGroup" VALUE="InsertCG" onClick="insertColGroup()" width=100>
<INPUT TYPE="button" NAME="App ColGroup" VALUE="AppendCG" onClick="appendColGroup()" width=100>
<INPUT TYPE="button" NAME="Del ColGroup" VALUE="DeleteCG" onClick="deleteColGroup()" width=100>
<br>
<INPUT TYPE="button" NAME="Ins Col" VALUE="InsertCol" onClick="insertCol()" width=100>
<INPUT TYPE="button" NAME="App Col" VALUE="AppendCol" onClick="appendCol()" width=100>
<INPUT TYPE="button" NAME="Del Col" VALUE="DeleteCol" onClick="deleteCol()" width=100>
<br>
<INPUT TYPE="button" NAME="Ins RowGroup" VALUE="InsertRG" onClick="insertRowGroup()" width=100>
<INPUT TYPE="button" NAME="App RowGroup" VALUE="AppendRG" onClick="appendRowGroup()" width=100>
<INPUT TYPE="button" NAME="Del RowGroup" VALUE="DeleteRG" onClick="deleteRowGroup()" width=100>
<INPUT TYPE="button" NAME="App RowGroup with content" VALUE="AppendRG with content" onClick="appendRowGroupWithContent()" width=100>
<br>
<INPUT TYPE="button" NAME="Ins Row" VALUE="InsertRow" onClick="insertRow()" width=100>
<INPUT TYPE="button" NAME="App Row" VALUE="AppendRow" onClick="appendRow()" width=100>
<INPUT TYPE="button" NAME="Del Row" VALUE="DeleteRow" onClick="deleteRow()" width=100>
<INPUT TYPE="button" NAME="App Row with content" VALUE="AppendRow with content" onClick="appendRowWithContent()" width=100>
<INPUT TYPE="button" NAME="App Row with content" VALUE="InsertRow with content" onClick="insertRowWithContent()" width=100>
<INPUT TYPE="button" NAME="Set Row Index" VALUE="Set Row Index" onClick="setRowIndex()">
<INPUT TYPE="button" NAME="Set Section Row Index" VALUE="Set Section Row Index" onClick="setSectionRowIndex()">
<br>
<INPUT TYPE="button" NAME="Ins Cell" VALUE="InsertCell" onClick="insertCell()" width=100>
<INPUT TYPE="button" NAME="App Cell" VALUE="AppendCell" onClick="appendCell()" width=100>
<INPUT TYPE="button" NAME="Del Cell" VALUE="DeleteCell" onClick="deleteCell()" width=100>
<INPUT TYPE="button" NAME="Set Cell Index" VALUE="Set Cell Index" onClick="setCellIndex()" width=100>
<br>
<INPUT TYPE="button" NAME="Add a lot" VALUE="AddALot" onClick="AddALot()" width=100>
<br>
<INPUT TYPE="button" NAME="Change Table Style" VALUE="ChangeTableStyle" onClick="changeTableStyle()" width=100>
<INPUT TYPE="button" NAME="Change Caption Style" VALUE="ChangeCaptionStyle" onClick="changeCaptionStyle()" width=100>
<INPUT TYPE="button" NAME="Change ColGroup Style" VALUE="ChangeColGroupStyle" onClick="changeColGroupStyle()" width=100>
<INPUT TYPE="button" NAME="Change Col Style" VALUE="ChangeColStyle" onClick="changeColStyle()" width=100>
<INPUT TYPE="button" NAME="Change RowGroup Style" VALUE="ChangeRowGroupStyle" onClick="changeRowGroupStyle()" width=100>
<INPUT TYPE="button" NAME="Change Row Style" VALUE="ChangeRowStyle" onClick="changeRowStyle()" width=100>
<INPUT TYPE="button" NAME="Change Cell Style" VALUE="ChangeCellStyle" onClick="changeCellStyle()" width=100>
</form>
</BODY></HTML>
|
