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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: 1px solid blue;
}
</style>
</head>
<body onLoad=handleOnLoad()>
The table below has two rows with blue borders.<br>
If we add a new similar row using DHTML the borders disappear. They may although
show up in small bits and pieces depending on what you do hereafter (using the
menus, opening other windows, and various other things).<p>
<table id="myTable">
<tr>
<th>Column-A</th>
<th>Column-B</th>
<th>Column-C</th>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
<script>
function handleOnLoad()
{
var table = document.getElementById("myTable");
alert("Now we add a new row");
// Add a new row at the end of the table
var newRow = table.insertRow(3);
var cell;
for (var i=0 ; i<3 ; ++i)
{
if (0)
{
cell = document.createElement("TD");
cell.innerHTML = "C"+(i+1);
newRow.appendChild(cell);
}
else
{
cell = newRow.insertCell(i);
cell.innerHTML = "C"+(i+1);
}
}
}
</script>
</body>
</html>
|
