Ik heb een javascript programma'tje geschreven die een zogenaamde "knockout-table" genereert. Een voorbeeld van een dergelijke tabel is: http://yozh.org/images/setable.jpg
Deze tabel bouw ik recursief op met behulp van een reeks DIV elementen. De parent DIV van deze tabel = <div id="knockoutTable">
Mijn javascript zal dus de DOM manipuleren en steeds nieuwe DIV elementen creeeren en aan zijn parent-DIV hangen. De DIV structuur wordt prachtig opgebouwd en werkt perfect.
Het probleem is dat de afmetingen van de <div id="knockoutTable"> en <div id="knockoutContainer"> niet aangepast. Dus wanneer ik een Button toevoeg aan de knockoutContainer, komt deze niet onderaan mijn tabel terecht, maar eerder tussen de knockout-table. Alle afmetingen zijn relatief (CSS: height: ...%; width: ...%; position="relative")
Waarschijnlijk komt dit omdat de <div id="knockoutContainer"> reeds is opgebouwd en dus na het manipuleren niet meer opnieuw gerendered wordt. Bestaat er een workaround voor dit probleem. Ik heb ook eens gekeken naar JavaScript libraries (prototype), maar echt specifiek over dit probleem heb ik niet veel teruggevonden.
De initiële HTML pagina is de volgende:
In de body onload() roep ik dan mijn JavaScript functie op die de DOM manipuleert op deze manier:
Het resultaat is echter dit:
(DIV id="knockoutContainer" heeft een zwarte rand, DIV id="knockoutTable" heeft een blauwe rand. Deze twee DIV's zie je helemaal bovenaan het scherm opeen geplakt). Ik zou dus willen dat deze 2 DIV's mooi rond de knockout-table komen.
Ik heb al geprobeerd om de <DIV id=knockoutTable> volledig te verwijderen en dan opnieuw toe te voegen, maar dit helpt dus niet.
Hieronder vind je nogmaals de volledige CSS:
Deze tabel bouw ik recursief op met behulp van een reeks DIV elementen. De parent DIV van deze tabel = <div id="knockoutTable">
Mijn javascript zal dus de DOM manipuleren en steeds nieuwe DIV elementen creeeren en aan zijn parent-DIV hangen. De DIV structuur wordt prachtig opgebouwd en werkt perfect.
Het probleem is dat de afmetingen van de <div id="knockoutTable"> en <div id="knockoutContainer"> niet aangepast. Dus wanneer ik een Button toevoeg aan de knockoutContainer, komt deze niet onderaan mijn tabel terecht, maar eerder tussen de knockout-table. Alle afmetingen zijn relatief (CSS: height: ...%; width: ...%; position="relative")
Waarschijnlijk komt dit omdat de <div id="knockoutContainer"> reeds is opgebouwd en dus na het manipuleren niet meer opnieuw gerendered wordt. Bestaat er een workaround voor dit probleem. Ik heb ook eens gekeken naar JavaScript libraries (prototype), maar echt specifiek over dit probleem heb ik niet veel teruggevonden.
De initiële HTML pagina is de volgende:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
...
<body>
<!-- container with knockout-table + buttons + ... -->
<div id="knockoutContainer">
<!-- container for knockout-table -->
<div id="knockoutTable">
</div>
</div>
</body>
</html> |
In de body onload() roep ik dan mijn JavaScript functie op die de DOM manipuleert op deze manier:
code:
1
| <body onload="generateTable(4, document.getElementById('knockoutTable'));"> |
Het resultaat is echter dit:
(DIV id="knockoutContainer" heeft een zwarte rand, DIV id="knockoutTable" heeft een blauwe rand. Deze twee DIV's zie je helemaal bovenaan het scherm opeen geplakt). Ik zou dus willen dat deze 2 DIV's mooi rond de knockout-table komen.
Ik heb al geprobeerd om de <DIV id=knockoutTable> volledig te verwijderen en dan opnieuw toe te voegen, maar dit helpt dus niet.
Hieronder vind je nogmaals de volledige CSS:
code:
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
| @charset "utf-8";
td {
vertical-align:middle;
text-align: center;
}
#knockoutContainer {
border: solid; black;1px;
height: auto;
}
#knockoutTable {
width: 100%;
height: 100%;
border: solid 1px blue;
}
.left {
border:solid;
border-color:red;
border-width:1px;
float:left;
width:80%;
height:50%;
position:relative;
}
.right {
border:solid;
border-color:green;
border-width:1px;
float:left;
width:80%;
height:50%;
position:relative
}
.node {
border:solid;
border-color:blue;
border-width:1px;
float:right;
width:20%;
height:100%;
position:relative;
font-size:8px;
} |
[ Voor 3% gewijzigd door Feyd-Rautha op 30-05-2009 09:15 ]
I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. Where the fear has gone there will be nothing. Only I will remain.
:strip_icc():strip_exif()/u/100070/crop5d011fa0d05d4_cropped.jpeg?f=community)
:strip_icc():strip_exif()/u/206968/325134.jpg?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
