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
|
<HTML>
<HEAD>
<style>
TABLE
{
border: 1px solid grey;
border-spacing: 0px;
border-collapse: collapse;
font-size : 10pt;
}
TD
{
border: 1px solid grey;
width:75px;
}
INPUT
{
width:60px;
font-size:10pt;
border-style:solid;
}
</style>
<script>
function insertTextField()
{
var cell1 = document.getElementById("cell1");
var tf = document.createElement("input");
// remove text node and insert formless textfield
cell1.replaceChild(tf, cell1.firstChild);
}
function removeTextField()
{
var cell1 = document.getElementById("cell1");
var text = document.createTextNode("new text");
cell1.replaceChild(text, cell1.firstChild);
}
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td id="cell1">cell 1</td>
<td id="cell2">cell 2</td>
<td id="cell3">cell 3</td>
</tr>
<tr>
<td>r3c1</td>
<td>r3c2</td>
<td>r3c3</td>
</tr>
</table>
<form>
<input type="button" value="Insert textfield into first cell"
onclick="insertTextField();"
style="width:300px">
<input type="button" value="Remove textfield from first cell"
onclick="removeTextField();"
style="width:300px">
</form>
</BODY>
</HTML>
|
