:strip_icc():strip_exif()/u/19013/BSR.jpg?f=community)
(Edit - meer uitleg toegevoegd)
Ik ben bij een (grote) klant bezig met het maken van een lay-out voor een portal. De specs zijn vastgelegd in een use-case waarin de onderstaande voorwaarden staan.
Mijn taak is om een lay-out te bouwen, op basis van html en indien nodig javascript, die in de portal geplaatst kan worden zodat de portlet-bouwers de gegevens die door een query worden teruggegeven uit de database hierin kunnen plaatsen.
Hiervoor ben ik bezig om een dynamische tabel te bouwen met javascript volgens het DOM model.
(LET OP: interactie met database wordt gemaakt door portlet-bouwers, rijen en kolommen zijn for testing vastgezet op 5)
Daarvoor gelden de volgende eisen:
- De bovenste rij moet de naam van de tabel bevatten. Het aantal cellen kan wisselen (in voorbeeld vastgezet op 5) en de naam wordt uit de database uitgelezen
- De volgende rijen moeten gegevens uit de database bevatten. Het aantal cellen is gelijk aan dat van de bovenste regel.
Layout:
- De tabel mag geen buitenranden hebben
- Alle verticale randen tussen de rijen moeten oranje zijn (#FF6600)
- De rand onder de bovenste rij moet oranje zijn (#FF6600)
- De randen onder alle tussenrijen moeten grijs zijn (#999999)
Ik heb de volgende aanpak gehanteerd: De kolom wordt per rij opgebouwd - daarna worden de cellen ingevuld.
Eerst wordt de bovenste rij opgebouwd - hier wordt via een switch eerst bij de linker cel alleen de onderborder oranje getekend. De volgende cellen krijgen zowel de linker- als de onderborder oranje getekend.
Dan worden de volgende rijen per rij opgebouwd, er wordt ook weer via een switch-statement eerst de linker cel met alleen een grijze onderrand en daarna de volgende cellen met een oranje linkerrand en een grijze onderrand getekend.
De randen worden dus per cel ingetekend. Nergens wordt de bovenste en de rechter rand getekend. Hierdoor ontstaan er kleine onderbrekingen in de borders tussen de cellen.
Ik wil niet nog meer switch-statements gaan maken, de projectleider wil de lijnen doorlopend getekend hebben.
Wat is hier een oplossing voor!??
Alvast dank voor jullie hulp!
Hieronder de code:
=============
Ik ben bij een (grote) klant bezig met het maken van een lay-out voor een portal. De specs zijn vastgelegd in een use-case waarin de onderstaande voorwaarden staan.
Mijn taak is om een lay-out te bouwen, op basis van html en indien nodig javascript, die in de portal geplaatst kan worden zodat de portlet-bouwers de gegevens die door een query worden teruggegeven uit de database hierin kunnen plaatsen.
Hiervoor ben ik bezig om een dynamische tabel te bouwen met javascript volgens het DOM model.
(LET OP: interactie met database wordt gemaakt door portlet-bouwers, rijen en kolommen zijn for testing vastgezet op 5)
Daarvoor gelden de volgende eisen:
- De bovenste rij moet de naam van de tabel bevatten. Het aantal cellen kan wisselen (in voorbeeld vastgezet op 5) en de naam wordt uit de database uitgelezen
- De volgende rijen moeten gegevens uit de database bevatten. Het aantal cellen is gelijk aan dat van de bovenste regel.
Layout:
- De tabel mag geen buitenranden hebben
- Alle verticale randen tussen de rijen moeten oranje zijn (#FF6600)
- De rand onder de bovenste rij moet oranje zijn (#FF6600)
- De randen onder alle tussenrijen moeten grijs zijn (#999999)
Ik heb de volgende aanpak gehanteerd: De kolom wordt per rij opgebouwd - daarna worden de cellen ingevuld.
Eerst wordt de bovenste rij opgebouwd - hier wordt via een switch eerst bij de linker cel alleen de onderborder oranje getekend. De volgende cellen krijgen zowel de linker- als de onderborder oranje getekend.
Dan worden de volgende rijen per rij opgebouwd, er wordt ook weer via een switch-statement eerst de linker cel met alleen een grijze onderrand en daarna de volgende cellen met een oranje linkerrand en een grijze onderrand getekend.
De randen worden dus per cel ingetekend. Nergens wordt de bovenste en de rechter rand getekend. Hierdoor ontstaan er kleine onderbrekingen in de borders tussen de cellen.
Ik wil niet nog meer switch-statements gaan maken, de projectleider wil de lijnen doorlopend getekend hebben.
Wat is hier een oplossing voor!??
Alvast dank voor jullie hulp!
Hieronder de code:
=============
HTML:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/javascript; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript"> function start() { //get the reference for the body var mybody = document.getElementsByTagName("body")[0]; //creates <table> and <tbody> elements mytable = document.createElement("table"); mytablebody = document.createElement("tbody"); // ** TODO ** //variable rowtotal has to be linked to database.getRows() to display all the rows in the query. For testing this value is now set to 5. var rowtotal = 5; // ** TODO ** //variable celltotal has to be linked to database.getCells() to display all the cells in a row. For testing this value is now set to 5. var celltotal = 5; for(var j = 0; j < rowtotal; j++) { switch(j) { case 0: //creates a <tr> element mycurrent_row = document.createElement("tr"); //creating all cells for (var h = 0; h < celltotal; h++) { switch (h) { // this cell only has a bottom border in orange case 0: //creates a <td> element mycurrent_cell = document.createElement("td"); //creates a Text Node currenttext = document.createTextNode("This is column" + (h+1)); //appends the Text Node we created into the cell <td> mycurrent_cell.appendChild(currenttext); //appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell.setAttribute("align","center"); //sets the css properties for each cell -- border line and color, no horizontal scroll, bold font var cssStringTop = 'font-weight:bold;overflow-x:hidden;border-bottom:thin solid #ff6600'; mycurrent_cell.style.cssText = cssStringTop; mycurrent_cell.setAttribute('style',cssStringTop); //these cells have both a left and a bottom border in orange default: //creates a <td> element mycurrent_cell = document.createElement("td"); //creates a Text Node currenttext = document.createTextNode("This is column" + (h+1)); //appends the Text Node we created into the cell <td> mycurrent_cell.appendChild(currenttext); //appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell.setAttribute("align","center"); //sets the css properties for each cell -- border line and color, no horizontal scroll, bold font var cssStringTop2 = 'font-weight:bold;overflow-x:hidden;border-left:thin solid #ff6600;border-bottom:thin solid #ff6600'; mycurrent_cell.style.cssText = cssStringTop2; mycurrent_cell.setAttribute('style',cssStringTop2); } } //appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); default: //creates a <tr> element mycurrent_row = document.createElement("tr"); //creating all cells for (var i = 0; i < celltotal; i++) { switch (i) { //this cell only has a bottom border in gray case 0: //creates a <td> element mycurrent_cell = document.createElement("td"); //creates a Text Node currenttext = document.createTextNode("cell is row " + (j+1) + ", column " + (i+1)); //appends the Text Node we created into the cell <td> mycurrent_cell.appendChild(currenttext); //appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); //sets the css properties for each cell -- border line and colors, no horizontal scroll, padding var cssString = 'padding-top:2px;padding-left:10px;padding-right:10px;overflow-x:hidden;border-bottom:thin solid #999999'; mycurrent_cell.style.cssText = cssString; mycurrent_cell.setAttribute('style',cssString); //these cells have a bottom border in gray and a left border in orange default: //creates a <td> element mycurrent_cell = document.createElement("td"); //creates a Text Node currenttext = document.createTextNode("cell is row " + (j+1) + ", column " + (i+1)); //appends the Text Node we created into the cell <td> mycurrent_cell.appendChild(currenttext); //appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); //sets the css properties for each cell -- border line and colors, no horizontal scroll, padding var cssString2 = 'padding-top:2px;padding-left:10px;padding-right:10px;overflow-x:hidden;border-left:thin solid #ff6600;border-bottom:thin solid #999999'; mycurrent_cell.style.cssText = cssString2; mycurrent_cell.setAttribute('style',cssString2); } } //appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } } //appends <tbody> into <table> mytable.appendChild(mytablebody); //appends <table> into <body> mybody.appendChild(mytable); //sets the border attribute of mytable to 2 //mytable.setAttribute("border","1"); mytable.setAttribute("width","940 px"); } </script> </head> <body onload="start()"> </body> </html> |
[ Voor 3% gewijzigd door C3La op 03-04-2009 15:52 ]
:strip_exif()/u/13818/episodebutler_60x60.gif?f=community)
:strip_exif()/u/259931/stuiterbal2.gif?f=community)
/u/39810/danone.png?f=community)
