Tabellen im Web – Teil 5 – Interaktion

von Thomas | 0 | 11157 Aufrufe

5 Interaktion

Anzeige Hier werben

Neben allen Nachteilen, welche aktuelle Anzeigegeräte bei der Darstellung von typografischen Inhalten aufweisen, sollte man die Vorteile nicht außer Acht lassen.

Einen nennenswerten Vorteil stellt die Möglichkeit dar, Inhalte interaktiv zu präsentieren. Tabellen lassen sich mit Hilfe von nutzerseitigen Scriptsprachen (JavaScript) mit Zusatzfunktionen belegen, welche den Nutzwert erheblich erhöhen können.

An dieser Stelle werden die beiden häufigsten Szenarien (Sortieren und Markieren) exemplarisch behandelt. Für alle weiteren denkbaren Möglichkeiten der Interaktion (Umordnen per Drag&Drop, Filtern, Editieren etc.) möchten wir gerne auf die Webseiten der bekannten JS-Frameworks verweisen (http://mootools.net/, http://script.aculo.us/, http://www.prototypejs.org/, http://jquery.com/).

5.1 Usability/Accessibility

So wie die interaktive Gestaltung einer Tabelle den Nutzwert erheblich steigern kann, kann dieser aufgrund einer einseitigen Ausrichtung auf eine spezielle Technologie auch ungewollt gemindert werden.

Einige User der definierten Zielgruppe bewegen sich u.U. mit Hilfe von nicht-visuellen Browsern (Screenreader) oder anderen Endgeräten (z.B. Handys) durch das Netz. Für sie stellen interaktive Spielereien ohne Nutzwert eine Barriere dar und können den Zugriff auf die Daten verhindern.

Es empfiehlt sich aus diesem Grund, Tabellen in ihrer bekannten statischen Weise zu gestalten und nachträglich mit interaktiven Funktionen zu versehen. Auf diese Weise ist sichergestellt, dass allen Benutzern der Zugriff auf die ordentlich strukturierten Daten ermöglicht bleibt. Die Interaktion sollte stets als Zusatz und weitere Steigerung der Bedienbarkeit, nicht aber als Voraussetzung verstanden werden.

5.2 JavaScript

JavaScript als auf Benutzerseite ausgeführte Scriptsprache eignet sich aufgrund seiner guten Verbreitung und Unterstützung in aktuellen Browsern hervorragend für die interaktive Aufwertung einer (X)HTML-Tabelle.

Es gibt heute viele JavaScript-Frameworks, die einem einige Arbeit abnehmen können. Auf ein paar bekannte Vertreter aus dieser Gattung wurde bereits im ersten Teil dieses Abschnittes verwiesen.

Unter http://www.noupe.com/css/21-fresh-ajax-css-tables.html ist eine gute Zusammenstellung von 21+ JS-Bibliotheken zur interaktiven Gestaltung von Tabellen zu finden.

Als Ausgangsbasis für die beiden folgenden beispiele soll uns diese einfache Tabelle dienen:

 
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <!-- Text und Quelltext © Thomas Hochgürtel, Simon Schories -->
        <title>Tabellen im Web - Beispieltabelle</title>
        
        <!-- Meta-information -->
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="author" content="Simon Schories, Thomas Hochgürtel"/>
        
    </head>
    <body>
        <div id="page">
            <div id="explanation">
                <h4>Beispieltabelle</h4>
                <p>Diese Tabelle soll uns als Ausgangsbasis für die Implementierung der interaktiven Beispiele dienen.</p>
                
                <!-- Beispiel-Tabelle -->
                <table border="1">
                    <caption>Vereinsmitglieder</caption>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Wohnort</th>
                            <th>Bundesland</th>
                            <th>Alter</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Franz</td>
                            <td>München</td>
                            <td>Bayern</td>
                            <td>45</td>
                        </tr>
                        <tr>
                            <td>Friedrich</td>
                            <td>Augsburg</td>
                            <td>Bayern</td>
                            <td>33</td>
                        </tr>
                        <tr>
                            <td>Kalle</td>
                            <td>Berlin</td>
                            <td>Berlin</td>
                            <td>35</td>
                        </tr>
                        <tr>
                            <td>Heinz</td>
                            <td>Frankfurt a.M.</td>
                            <td>Hessen</td>
                            <td>68</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

Aufgrund der Artikel-Struktur von Webmasterpro werden sämtliche CSS- und JS-Codes direkt in die Beispiele gepackt.

Sortieren

Es ist nicht immer sofort eindeutig, nach welcher Hierarchie die Daten in einer Tabelle geordnet werden müssen, um eine optimale Struktur für den Nutzer zu bieten. Unter Umständen liegen die Präferenzen auch einfach von Nutzer zu Nutzer in unterschiedlichen Sortierungen.

Exemplarisch soll hier der unkomplizierte Einsatz von TableSorter 2.0 (http://tablesorter.com/) beschrieben werden. Wir starten also mit der oben definierten einfachen Tabelle, die rudimentär nach (X)HTML-Vorgaben gestaltet wurde.

Nach dem Entpacken des Archives werden in den head-Bereich der Seite folgende beide Zeilen eingebunden. #tabellenid muss dabei eine eindeutige ID auf der Seite sein.

Da es sich bei TableSorter um ein jQuery-Plugin handelt, ist das JS-Framework jQuery zwingend erforderlich. Den Link zum Download der aktuellen Version finden Sie auf der oben angegebenen TableSorter-Seite im Bereich "Download" oder unter http://jquery.com/.

 
HTML
1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
<script type="text/javascript">
    $(document).ready(function() 
        { 
            $("#tabellenid").tablesorter(); 
        } 
    );
</script>

Zudem erhält die Tabelle die eben definierte ID sowie für die spätere CSS-Formatierung eine Klasse zugeordnet:

 
HTML
1
2
<table border="1" id="tablesorter" class="tablesorter">
...

Als Ergebnis sieht man nach dem Einbinden einer weiteren CSS-Datei (auch auf der Tablesorter-Seite erhältlich) eine Tabelle, welche sich durch Klicken auf den Tabellenkopf spaltenweise sortieren lässt.

 
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <!-- Text und Quelltext © Thomas Hochgürtel, Simon Schories -->
        <title>Tabellen im Web - Beispieltabelle TableSorter</title>
        
        <!-- Meta-information -->
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="author" content="Simon Schories, Thomas Hochgürtel"/>
        
        <!-- Stylesheets -->
        <style type="text/css">
            <!--
                body {
                    margin: 2em 1em 3em 1em;
                }

                #page {
                    width: 600px;
                    margin: auto auto auto auto;
                    color: #222;
                    font-family: "Helvetica", "Arial", "Lucida", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
                    font-size: 80%;
                    line-height: 160%;
                }

                #page .left {
                    width: 700px;
                }

                #page p {
                    margin: 0 0 1em 0;
                    /* text-indent: 1em; */
                }

                #page p:first-child {
                    text-indent: 0;
                }

                #page h1 a,
                #page h1 a:hover,
                #page h2 a,
                #page h2 a:hover,
                #page h3 a,
                #page h3 a:hover,
                #page h4 a,
                #page h4 a:hover {
                    color: #222;
                } 

                #page h1 {
                    padding: 8px 0 0 0;
                    border: 0 solid #ccc;
                    border-width: 1px 0 0 0;
                    margin: 0 0 1em 0;
                    font-size: 170%;
                    font-weight: bold;
                }

                #page h2 {
                    padding: 0;
                    margin: 0;
                    font-size: 100%;
                }

                #page h3 {
                    border: 0 solid #ccc;
                    border-width: 0;
                    margin: 2.5em 0 0.5em 0;
                    font-size: 135%;
                }

                #page h4 {
                    clear: left;
                    font-size: 135%;
                    margin: 1.5em 0 0.5em 0;
                    font-weight: bold;
                }

                #page a {
                    color: #319fcd;
                    text-decoration: none;
                }

                #page a:hover {
                    color: #003d5c;
                    color: #222;
                }

                #page a.ext {
                    padding: 0 0 0 16px;
                    background-image: url("../images/link.gif");
                    background-repeat: no-repeat;
                    background-position: left center;
                }

                #page a.ext:hover {
                    background-image: url("../images/link-a.gif");
                }

                #page a img {
                    border: none;
                }

                #page pre,
                #page code,
                #page samp {
                    color: #777;
                    font-family: "Monaco", "Courier", serif;
                }

                #page samp {
                    display: block;
                    padding: 8px 16px;
                    border: 1px solid #ccc;
                    margin: 0.5em 0 1em 0;
                }

                #page dfn {
                    margin: 2em 0 2.5em 0;
                }

                #page blockquote {
                    margin: 0;
                }

                .imgzoom img {
                    border: 1px solid #ccc;
                }

                .imgzoom a.close {
                    display: none !important;
                    font-family: "Georgia", "Palatino", serif;
                    font-size: 100%;
                }   

                .simon {
                    float: left;
                    padding: 32px;
                    margin: 2em 0 4em 0;
                    border: 1px solid #ccc;
                }

                .simon table.table_example_1 {
                    border-collapse: collapse;
                    border: 2px solid #aaa;
                    border-width: 2px 0;
                    empty-cells: hide;
                }

                .simon table.table_example_1 caption {
                    text-align: left;
                    margin: 0 0 0.75em 0.75em;
                    font-family: "Georgia", "Palatino", serif;
                    font-size: 100%;
                    font-style: italic;
                    letter-spacing: 0.05em;
                }

                .simon table.table_example_1 tr td,
                .simon table.table_example_1 tr th {
                    vertical-align: baseline;
                    border: 0 solid #aaa;
                    padding: 0.75em;
                    line-height: 120%;
                }
                    
                .simon table.table_example_1 thead tr th {
                    border-width: 0 1px;
                    text-align: left;
                }
                    
                .simon table.table_example_1 tbody tr.first-row td {
                    border-top-width: 1px;
                }

                .simon table.table_example_1 thead tr th.last-col {
                    border-width: 0 0 0 1px;
                }
                    
                .simon table.table_example_1 thead tr th.last-row {
                    vertical-align: bottom;
                }

                .simon table.table_example_1 thead tr th.first-col {
                    border-width: 0 1px 0 0;
                }

                .simon table.table_example_1 tbody tr td {
                    padding: 0.5em 0.75em;
                    border-width: 0 0 1px 0;
                }



                .simon table.table_example_2 {
                    border-width: 2px 0 0 0;
                    border-color: #a5ceeb;
                }

                .simon table.table_example_2 thead tr th,
                .simon table.table_example_1 thead tr th.last-col,
                .simon table.table_example_2 thead tr th.first-col {
                    border-width: 0 0 1px 0;
                }

                .simon table.table_example_2 thead th.last-col {
                    border-width: 0;
                }

                .simon table.table_example_2 thead tr th.first-row {
                    padding-bottom: 0.45em;
                }

                .simon table.table_example_2 thead tr th.last-row {
                    vertical-align: top;
                }

                .simon table.table_example_2 thead th {
                    border-color: #a5ceeb;
                    font-weight: normal;
                }

                .simon table.table_example_2 tbody td {
                    border-color: #a5ceeb;
                    background-color: #e5f2ff;
                    border-width: 0 1px 0 0;
                    font-family: "Georgia", "Palatino", serif;
                    letter-spacing: 0.03em;
                }

                .simon table.table_example_2 tbody td.row-group-end {
                    border-width: 0 0 2px 0;
                }           

                table.tablesorter {
                    font-family:arial;
                    background-color: #CDCDCD;
                    margin:10px 0pt 15px;
                    font-size: 8pt;
                    width: 100%;
                    text-align: left;
                }
                table.tablesorter thead tr th, table.tablesorter tfoot tr th {
                    background-color: #e6EEEE;
                    border: 1px solid #FFF;
                    font-size: 8pt;
                    padding: 4px;
                }
                table.tablesorter thead tr .header {
                    background-image: url(../images/bg.gif);
                    background-repeat: no-repeat;
                    background-position: center right;
                    cursor: pointer;
                }
                table.tablesorter tbody td {
                    color: #3D3D3D;
                    padding: 4px;
                    background-color: #FFF;
                    vertical-align: top;
                }
                table.tablesorter tbody tr.odd td {
                    background-color:#F0F0F6;
                }
                table.tablesorter thead tr .headerSortUp {
                    background-image: url(../images/asc.gif);
                }
                table.tablesorter thead tr .headerSortDown {
                    background-image: url(../images/desc.gif);
                }
                table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
                background-color: #8dbdd8;
                }
            -->
        </style>
        
        <!-- Javascript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            /* Tablesorter */
            (function($){$.extend({tablesorter:new function(){var parsers=[],widgets=[];this.defaults={cssHeader:"header",cssAsc:"headerSortUp",cssDesc:"headerSortDown",sortInitialOrder:"asc",sortMultiSortKey:"shiftKey",sortForce:null,sortAppend:null,textExtraction:"simple",parsers:{},widgets:[],widgetZebra:{css:["even","odd"]},headers:{},widthFixed:false,cancelSelection:true,sortList:[],headerList:[],dateFormat:"us",decimal:'.',debug:false};function benchmark(s,d){log(s+","+(new Date().getTime()-d.getTime())+"ms");}this.benchmark=benchmark;function log(s){if(typeof console!="undefined"&&typeof console.debug!="undefined"){console.log(s);}else{alert(s);}}function buildParserCache(table,$headers){if(table.config.debug){var parsersDebug="";}var rows=table.tBodies[0].rows;if(table.tBodies[0].rows[0]){var list=[],cells=rows[0].cells,l=cells.length;for(var i=0;i<l;i++){var p=false;if($.metadata&&($($headers[i]).metadata()&&$($headers[i]).metadata().sorter)){p=getParserById($($headers[i]).metadata().sorter);}else if((table.config.headers[i]&&table.config.headers[i].sorter)){p=getParserById(table.config.headers[i].sorter);}if(!p){p=detectParserForColumn(table,cells[i]);}if(table.config.debug){parsersDebug+="column:"+i+" parser:"+p.id+"\n";}list.push(p);}}if(table.config.debug){log(parsersDebug);}return list;};function detectParserForColumn(table,node){var l=parsers.length;for(var i=1;i<l;i++){if(parsers[i].is($.trim(getElementText(table.config,node)),table,node)){return parsers[i];}}return parsers[0];}function getParserById(name){var l=parsers.length;for(var i=0;i<l;i++){if(parsers[i].id.toLowerCase()==name.toLowerCase()){return parsers[i];}}return false;}function buildCache(table){if(table.config.debug){var cacheTime=new Date();}var totalRows=(table.tBodies[0]&&table.tBodies[0].rows.length)||0,totalCells=(table.tBodies[0].rows[0]&&table.tBodies[0].rows[0].cells.length)||0,parsers=table.config.parsers,cache={row:[],normalized:[]};for(var i=0;i<totalRows;++i){var c=table.tBodies[0].rows[i],cols=[];cache.row.push($(c));for(var j=0;j<totalCells;++j){cols.push(parsers[j].format(getElementText(table.config,c.cells[j]),table,c.cells[j]));}cols.push(i);cache.normalized.push(cols);cols=null;};if(table.config.debug){benchmark("Building cache for "+totalRows+" rows:",cacheTime);}return cache;};function getElementText(config,node){if(!node)return"";var t="";if(config.textExtraction=="simple"){if(node.childNodes[0]&&node.childNodes[0].hasChildNodes()){t=node.childNodes[0].innerHTML;}else{t=node.innerHTML;}}else{if(typeof(config.textExtraction)=="function"){t=config.textExtraction(node);}else{t=$(node).text();}}return t;}function appendToTable(table,cache){if(table.config.debug){var appendTime=new Date()}var c=cache,r=c.row,n=c.normalized,totalRows=n.length,checkCell=(n[0].length-1),tableBody=$(table.tBodies[0]),rows=[];for(var i=0;i<totalRows;i++){rows.push(r[n[i][checkCell]]);if(!table.config.appender){var o=r[n[i][checkCell]];var l=o.length;for(var j=0;j<l;j++){tableBody[0].appendChild(o[j]);}}}if(table.config.appender){table.config.appender(table,rows);}rows=null;if(table.config.debug){benchmark("Rebuilt table:",appendTime);}applyWidget(table);setTimeout(function(){$(table).trigger("sortEnd");},0);};function buildHeaders(table){if(table.config.debug){var time=new Date();}var meta=($.metadata)?true:false,tableHeadersRows=[];for(var i=0;i<table.tHead.rows.length;i++){tableHeadersRows[i]=0;};$tableHeaders=$("thead th",table);$tableHeaders.each(function(index){this.count=0;this.column=index;this.order=formatSortingOrder(table.config.sortInitialOrder);if(checkHeaderMetadata(this)||checkHeaderOptions(table,index))this.sortDisabled=true;if(!this.sortDisabled){$(this).addClass(table.config.cssHeader);}table.config.headerList[index]=this;});if(table.config.debug){benchmark("Built headers:",time);log($tableHeaders);}return $tableHeaders;};function checkCellColSpan(table,rows,row){var arr=[],r=table.tHead.rows,c=r[row].cells;for(var i=0;i<c.length;i++){var cell=c[i];if(cell.colSpan>1){arr=arr.concat(checkCellColSpan(table,headerArr,row++));}else{if(table.tHead.length==1||(cell.rowSpan>1||!r[row+1])){arr.push(cell);}}}return arr;};function checkHeaderMetadata(cell){if(($.metadata)&&($(cell).metadata().sorter===false)){return true;};return false;}function checkHeaderOptions(table,i){if((table.config.headers[i])&&(table.config.headers[i].sorter===false)){return true;};return false;}function applyWidget(table){var c=table.config.widgets;var l=c.length;for(var i=0;i<l;i++){getWidgetById(c[i]).format(table);}}function getWidgetById(name){var l=widgets.length;for(var i=0;i<l;i++){if(widgets[i].id.toLowerCase()==name.toLowerCase()){return widgets[i];}}};function formatSortingOrder(v){if(typeof(v)!="Number"){i=(v.toLowerCase()=="desc")?1:0;}else{i=(v==(0||1))?v:0;}return i;}function isValueInArray(v,a){var l=a.length;for(var i=0;i<l;i++){if(a[i][0]==v){return true;}}return false;}function setHeadersCss(table,$headers,list,css){$headers.removeClass(css[0]).removeClass(css[1]);var h=[];$headers.each(function(offset){if(!this.sortDisabled){h[this.column]=$(this);}});var l=list.length;for(var i=0;i<l;i++){h[list[i][0]].addClass(css[list[i][1]]);}}function fixColumnWidth(table,$headers){var c=table.config;if(c.widthFixed){var colgroup=$('<colgroup>');$("tr:first td",table.tBodies[0]).each(function(){colgroup.append($('<col>').css('width',$(this).width()));});$(table).prepend(colgroup);};}function updateHeaderSortCount(table,sortList){var c=table.config,l=sortList.length;for(var i=0;i<l;i++){var s=sortList[i],o=c.headerList[s[0]];o.count=s[1];o.count++;}}function multisort(table,sortList,cache){if(table.config.debug){var sortTime=new Date();}var dynamicExp="var sortWrapper = function(a,b) {",l=sortList.length;for(var i=0;i<l;i++){var c=sortList[i][0];var order=sortList[i][1];var s=(getCachedSortType(table.config.parsers,c)=="text")?((order==0)?"sortText":"sortTextDesc"):((order==0)?"sortNumeric":"sortNumericDesc");var e="e"+i;dynamicExp+="var "+e+" = "+s+"(a["+c+"],b["+c+"]); ";dynamicExp+="if("+e+") { return "+e+"; } ";dynamicExp+="else { ";}var orgOrderCol=cache.normalized[0].length-1;dynamicExp+="return a["+orgOrderCol+"]-b["+orgOrderCol+"];";for(var i=0;i<l;i++){dynamicExp+="}; ";}dynamicExp+="return 0; ";dynamicExp+="}; ";eval(dynamicExp);cache.normalized.sort(sortWrapper);if(table.config.debug){benchmark("Sorting on "+sortList.toString()+" and dir "+order+" time:",sortTime);}return cache;};function sortText(a,b){return((a<b)?-1:((a>b)?1:0));};function sortTextDesc(a,b){return((b<a)?-1:((b>a)?1:0));};function sortNumeric(a,b){return a-b;};function sortNumericDesc(a,b){return b-a;};function getCachedSortType(parsers,i){return parsers[i].type;};this.construct=function(settings){return this.each(function(){if(!this.tHead||!this.tBodies)return;var $this,$document,$headers,cache,config,shiftDown=0,sortOrder;this.config={};config=$.extend(this.config,$.tablesorter.defaults,settings);$this=$(this);$headers=buildHeaders(this);this.config.parsers=buildParserCache(this,$headers);cache=buildCache(this);var sortCSS=[config.cssDesc,config.cssAsc];fixColumnWidth(this);$headers.click(function(e){$this.trigger("sortStart");var totalRows=($this[0].tBodies[0]&&$this[0].tBodies[0].rows.length)||0;if(!this.sortDisabled&&totalRows>0){var $cell=$(this);var i=this.column;this.order=this.count++%2;if(!e[config.sortMultiSortKey]){config.sortList=[];if(config.sortForce!=null){var a=config.sortForce;for(var j=0;j<a.length;j++){if(a[j][0]!=i){config.sortList.push(a[j]);}}}config.sortList.push([i,this.order]);}else{if(isValueInArray(i,config.sortList)){for(var j=0;j<config.sortList.length;j++){var s=config.sortList[j],o=config.headerList[s[0]];if(s[0]==i){o.count=s[1];o.count++;s[1]=o.count%2;}}}else{config.sortList.push([i,this.order]);}};setTimeout(function(){setHeadersCss($this[0],$headers,config.sortList,sortCSS);appendToTable($this[0],multisort($this[0],config.sortList,cache));},1);return false;}}).mousedown(function(){if(config.cancelSelection){this.onselectstart=function(){return false};return false;}});$this.bind("update",function(){this.config.parsers=buildParserCache(this,$headers);cache=buildCache(this);}).bind("sorton",function(e,list){$(this).trigger("sortStart");config.sortList=list;var sortList=config.sortList;updateHeaderSortCount(this,sortList);setHeadersCss(this,$headers,sortList,sortCSS);appendToTable(this,multisort(this,sortList,cache));}).bind("appendCache",function(){appendToTable(this,cache);}).bind("applyWidgetId",function(e,id){getWidgetById(id).format(this);}).bind("applyWidgets",function(){applyWidget(this);});if($.metadata&&($(this).metadata()&&$(this).metadata().sortlist)){config.sortList=$(this).metadata().sortlist;}if(config.sortList.length>0){$this.trigger("sorton",[config.sortList]);}applyWidget(this);});};this.addParser=function(parser){var l=parsers.length,a=true;for(var i=0;i<l;i++){if(parsers[i].id.toLowerCase()==parser.id.toLowerCase()){a=false;}}if(a){parsers.push(parser);};};this.addWidget=function(widget){widgets.push(widget);};this.formatFloat=function(s){var i=parseFloat(s);return(isNaN(i))?0:i;};this.formatInt=function(s){var i=parseInt(s);return(isNaN(i))?0:i;};this.isDigit=function(s,config){var DECIMAL='\\'+config.decimal;var exp='/(^[+]?0('+DECIMAL+'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)'+DECIMAL+'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*'+DECIMAL+'0+$)/';return RegExp(exp).test($.trim(s));};this.clearTableBody=function(table){if($.browser.msie){function empty(){while(this.firstChild)this.removeChild(this.firstChild);}empty.apply(table.tBodies[0]);}else{table.tBodies[0].innerHTML="";}};}});$.fn.extend({tablesorter:$.tablesorter.construct});var ts=$.tablesorter;ts.addParser({id:"text",is:function(s){return true;},format:function(s){return $.trim(s.toLowerCase());},type:"text"});ts.addParser({id:"digit",is:function(s,table){var c=table.config;return $.tablesorter.isDigit(s,c);},format:function(s){return $.tablesorter.formatFloat(s);},type:"numeric"});ts.addParser({id:"currency",is:function(s){return/^[£$€?.]/.test(s);},format:function(s){return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9.]/g),""));},type:"numeric"});ts.addParser({id:"ipAddress",is:function(s){return/^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);},format:function(s){var a=s.split("."),r="",l=a.length;for(var i=0;i<l;i++){var item=a[i];if(item.length==2){r+="0"+item;}else{r+=item;}}return $.tablesorter.formatFloat(r);},type:"numeric"});ts.addParser({id:"url",is:function(s){return/^(https?|ftp|file):\/\/$/.test(s);},format:function(s){return jQuery.trim(s.replace(new RegExp(/(https?|ftp|file):\/\//),''));},type:"text"});ts.addParser({id:"isoDate",is:function(s){return/^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(s);},format:function(s){return $.tablesorter.formatFloat((s!="")?new Date(s.replace(new RegExp(/-/g),"/")).getTime():"0");},type:"numeric"});ts.addParser({id:"percent",is:function(s){return/\%$/.test($.trim(s));},format:function(s){return $.tablesorter.formatFloat(s.replace(new RegExp(/%/g),""));},type:"numeric"});ts.addParser({id:"usLongDate",is:function(s){return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|'?[0-9]{2}) (([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(AM|PM)))$/));},format:function(s){return $.tablesorter.formatFloat(new Date(s).getTime());},type:"numeric"});ts.addParser({id:"shortDate",is:function(s){return/\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);},format:function(s,table){var c=table.config;s=s.replace(/\-/g,"/");if(c.dateFormat=="us"){s=s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/,"$3/$1/$2");}else if(c.dateFormat=="uk"){s=s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/,"$3/$2/$1");}else if(c.dateFormat=="dd/mm/yy"||c.dateFormat=="dd-mm-yy"){s=s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/,"$1/$2/$3");}return $.tablesorter.formatFloat(new Date(s).getTime());},type:"numeric"});ts.addParser({id:"time",is:function(s){return/^(([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(am|pm)))$/.test(s);},format:function(s){return $.tablesorter.formatFloat(new Date("2000/01/01 "+s).getTime());},type:"numeric"});ts.addParser({id:"metadata",is:function(s){return false;},format:function(s,table,cell){var c=table.config,p=(!c.parserMetadataName)?'sortValue':c.parserMetadataName;return $(cell).metadata()[p];},type:"numeric"});ts.addWidget({id:"zebra",format:function(table){if(table.config.debug){var time=new Date();}$("tr:visible",table.tBodies[0]).filter(':even').removeClass(table.config.widgetZebra.css[1]).addClass(table.config.widgetZebra.css[0]).end().filter(':odd').removeClass(table.config.widgetZebra.css[0]).addClass(table.config.widgetZebra.css[1]);if(table.config.debug){$.tablesorter.benchmark("Applying Zebra widget",time);}}});})(jQuery);         
        </script>
        <script type="text/javascript">
            $(document).ready(function() 
                { 
                    $("#tablesorter").tablesorter(); 
                } 
            ); 
        </script>
    </head>
    <body>
        <div id="page">
            <div id="explanation">
                <h4>Beispieltabelle mit aktiviertem TableSorter</h4>
                <p>Als Ergebnis erhält man nach dem Einbinden einer weiteren CSS-Datei (auch auf der Tablesorter-Seite erhältlich) eine Tabelle, welche sich durch Klicken auf den Tabellenkopf spaltenweise sortieren lässt.</p>
                
                <!-- Beispiel-Tabelle -->
                <div class="simon" style="width:550px">
                    <table id="tablesorter" class="tablesorter">
                        <caption>Vereinsmitglieder</caption>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Wohnort</th>
                                <th>Bundesland</th>
                                <th>Alter</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Franz</td>
                                <td>München</td>
                                <td>Bayern</td>
                                <td>45</td>
                            </tr>
                            <tr>
                                <td>Friedrich</td>
                                <td>Augsburg</td>
                                <td>Bayern</td>
                                <td>33</td>
                            </tr>
                            <tr>
                                <td>Kalle</td>
                                <td>Berlin</td>
                                <td>Berlin</td>
                                <td>35</td>
                            </tr>
                            <tr>
                                <td>Heinz</td>
                                <td>Frankfurt a.M.</td>
                                <td>Hessen</td>
                                <td>68</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>
Markieren

Häufig haben Tabellen einen Umfang, der den Gestalter zwingt, kleinere Abstände und Schriften zu benutzen. Auch können die Zeilen trotz sorgfältiger Gestaltung so lang werden, dass der Überblick verloren geht.

Hier kann ein automatisches Markieren beim Überfahren der Zeile bzw. Spalte oder ein dauerhaftest Hervorheben durch Klicken den Überblick erleichtern.

Exemplarisch soll hier der Einsatz von TableCloth (http://cssglobe.com/lab/tablecloth/) beschrieben werden, da es sich sehr einfach einsetzen lässt und schnell Ergebnisse zeigt. Wir starten wie im vorigen Beispiel wieder mit der oben angegebenen einfachen Tabelle

Zunächst entpackt man das von oben genannter Website heruntergeladene Archiv mit den TableCloth-Dateien und fügt die folgenden beiden Zeilen im <head>-Tag der Seite ein:

 
HTML
1
2
3
<link href="tablecloth/tablecloth.css"
    rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

Als Ergebnis erhält man (ohne den Tabellenquelltext zu ändern) eine vorgestaltete Tabelle, welche die Zeilen beim Überfahren hervorhebt und auf Klick selektiert.

 
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
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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <!-- Text und Quelltext © Thomas Hochgürtel, Simon Schories -->
        <title>Tabellen im Web - Beispieltabelle TableCloth</title>
        
        <!-- Meta-information -->
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="author" content="Simon Schories, Thomas Hochgürtel"/>
        
        <!-- Stylesheets -->
        <style type="text/css">
            <!--
                body {
                    margin: 2em 1em 3em 1em;
                }

                #page {
                    width: 600px;
                    margin: auto auto auto auto;
                    color: #222;
                    font-family: "Helvetica", "Arial", "Lucida", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
                    font-size: 80%;
                    line-height: 160%;
                }

                #page .left {
                    width: 700px;
                }

                #page p {
                    margin: 0 0 1em 0;
                    /* text-indent: 1em; */
                }

                #page p:first-child {
                    text-indent: 0;
                }

                #page h1 a,
                #page h1 a:hover,
                #page h2 a,
                #page h2 a:hover,
                #page h3 a,
                #page h3 a:hover,
                #page h4 a,
                #page h4 a:hover {
                    color: #222;
                } 

                #page h1 {
                    padding: 8px 0 0 0;
                    border: 0 solid #ccc;
                    border-width: 1px 0 0 0;
                    margin: 0 0 1em 0;
                    font-size: 170%;
                    font-weight: bold;
                }

                #page h2 {
                    padding: 0;
                    margin: 0;
                    font-size: 100%;
                }

                #page h3 {
                    border: 0 solid #ccc;
                    border-width: 0;
                    margin: 2.5em 0 0.5em 0;
                    font-size: 135%;
                }

                #page h4 {
                    clear: left;
                    font-size: 135%;
                    margin: 1.5em 0 0.5em 0;
                    font-weight: bold;
                }

                #page a {
                    color: #319fcd;
                    text-decoration: none;
                }

                #page a:hover {
                    color: #003d5c;
                    color: #222;
                }

                #page a.ext {
                    padding: 0 0 0 16px;
                    background-image: url("../images/link.gif");
                    background-repeat: no-repeat;
                    background-position: left center;
                }

                #page a.ext:hover {
                    background-image: url("../images/link-a.gif");
                }

                #page a img {
                    border: none;
                }

                #page pre,
                #page code,
                #page samp {
                    color: #777;
                    font-family: "Monaco", "Courier", serif;
                }

                #page samp {
                    display: block;
                    padding: 8px 16px;
                    border: 1px solid #ccc;
                    margin: 0.5em 0 1em 0;
                }

                #page dfn {
                    margin: 2em 0 2.5em 0;
                }

                #page blockquote {
                    margin: 0;
                }

                .imgzoom img {
                    border: 1px solid #ccc;
                }

                .imgzoom a.close {
                    display: none !important;
                    font-family: "Georgia", "Palatino", serif;
                    font-size: 100%;
                }   

                .simon {
                    float: left;
                    padding: 32px;
                    margin: 2em 0 4em 0;
                    border: 1px solid #ccc;
                }

                .simon table.table_example_1 {
                    border-collapse: collapse;
                    border: 2px solid #aaa;
                    border-width: 2px 0;
                    empty-cells: hide;
                }

                .simon table.table_example_1 caption {
                    text-align: left;
                    margin: 0 0 0.75em 0.75em;
                    font-family: "Georgia", "Palatino", serif;
                    font-size: 100%;
                    font-style: italic;
                    letter-spacing: 0.05em;
                }

                .simon table.table_example_1 tr td,
                .simon table.table_example_1 tr th {
                    vertical-align: baseline;
                    border: 0 solid #aaa;
                    padding: 0.75em;
                    line-height: 120%;
                }
                    
                .simon table.table_example_1 thead tr th {
                    border-width: 0 1px;
                    text-align: left;
                }
                    
                .simon table.table_example_1 tbody tr.first-row td {
                    border-top-width: 1px;
                }

                .simon table.table_example_1 thead tr th.last-col {
                    border-width: 0 0 0 1px;
                }
                    
                .simon table.table_example_1 thead tr th.last-row {
                    vertical-align: bottom;
                }

                .simon table.table_example_1 thead tr th.first-col {
                    border-width: 0 1px 0 0;
                }

                .simon table.table_example_1 tbody tr td {
                    padding: 0.5em 0.75em;
                    border-width: 0 0 1px 0;
                }



                .simon table.table_example_2 {
                    border-width: 2px 0 0 0;
                    border-color: #a5ceeb;
                }

                .simon table.table_example_2 thead tr th,
                .simon table.table_example_1 thead tr th.last-col,
                .simon table.table_example_2 thead tr th.first-col {
                    border-width: 0 0 1px 0;
                }

                .simon table.table_example_2 thead th.last-col {
                    border-width: 0;
                }

                .simon table.table_example_2 thead tr th.first-row {
                    padding-bottom: 0.45em;
                }

                .simon table.table_example_2 thead tr th.last-row {
                    vertical-align: top;
                }

                .simon table.table_example_2 thead th {
                    border-color: #a5ceeb;
                    font-weight: normal;
                }

                .simon table.table_example_2 tbody td {
                    border-color: #a5ceeb;
                    background-color: #e5f2ff;
                    border-width: 0 1px 0 0;
                    font-family: "Georgia", "Palatino", serif;
                    letter-spacing: 0.03em;
                }

                .simon table.table_example_2 tbody td.row-group-end {
                    border-width: 0 0 2px 0;
                }           

                /* general styles */
                div.tablecloth {
                    border: 0;
                }

                .tablecloth table, .tablecloth td{
                    font:100% Arial, Helvetica, sans-serif; 
                }
                .tablecloth table{width:100%;border-collapse:collapse;margin:1em 0;}
                .tablecloth th, .tablecloth td{text-align:left;padding:.5em;border:1px solid #fff;}
                .tablecloth th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
                .tablecloth td{background:#e5f1f4;}

                /* tablecloth styles */

                .tablecloth tr.even td{background:#e5f1f4;}
                .tablecloth tr.odd td{background:#f8fbfc;}

                .tablecloth th.over, .tablecloth tr.even th.over, .tablecloth tr.odd th.over{background:#4a98af;}
                .tablecloth th.down, .tablecloth tr.even th.down, .tablecloth tr.odd th.down{background:#bce774;}
                .tablecloth th.selected, .tablecloth tr.even th.selected, .tablecloth tr.odd th.selected{}

                .tablecloth td.over, .tablecloth tr.even td.over, .tablecloth tr.odd td.over{background:#d1e7ad;}
                .tablecloth td.down, .tablecloth tr.even td.down, .tablecloth tr.odd td.down{background:#bce774;color:#fff;}
                .tablecloth td.selected, .tablecloth tr.even td.selected, .tablecloth tr.odd td.selected{background:#bce774;color:#555;}

                /* use this if you want to apply different styleing to empty table cells*/
                .tablecloth td.empty, .tablecloth tr.odd td.empty, .tablecloth tr.even .tablecloth td.empty{background:#fff;}   
            -->
        </style>
        
        <!-- Tablecloth -->
        <script type="text/javascript">
            /* 

                Tablecloth 
                written by Alen Grakalic, provided by Css Globe (cssglobe.com)
                please visit http://cssglobe.com/lab/tablecloth/
                
            */

            this.tablecloth = function(){
                
                // CONFIG 
                
                // if set to true then mouseover a table cell will highlight entire column (except sibling headings)
                var highlightCols = false;
                
                // if set to true then mouseover a table cell will highlight entire row (except sibling headings)
                var highlightRows = true;   
                
                // if set to true then click on a table sell will select row or column based on config
                var selectable = true;
                
                // this function is called when 
                // add your own code if you want to add action 
                // function receives object that has been clicked 
                this.clickAction = function(obj){
                    //alert(obj.innerHTML);
                    
                };


                
                // END CONFIG (do not edit below this line)
                
                
                var tableover = false;
                this.start = function(){
                    var tables = document.getElementsByTagName("table");
                    for (var i=0;i<tables.length;i++){
                        tables[i].onmouseover = function(){tableover = true};
                        tables[i].onmouseout = function(){tableover = false};           
                        rows(tables[i]);
                    };
                };
                
                this.rows = function(table){
                    var css = "";
                    var tr = table.getElementsByTagName("tr");
                    for (var i=0;i<tr.length;i++){
                        css = (css == "odd") ? "even" : "odd";
                        tr[i].className = css;
                        var arr = new Array();
                        for(var j=0;j<tr[i].childNodes.length;j++){             
                            if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
                        };      
                        for (var j=0;j<arr.length;j++){             
                            arr[j].row = i;
                            arr[j].col = j;
                            if(arr[j].innerHTML == "&nbsp;" || arr[j].innerHTML == "") arr[j].className += " empty";                    
                            arr[j].css = arr[j].className;
                            arr[j].onmouseover = function(){
                                over(table,this,this.row,this.col);
                            };
                            arr[j].onmouseout = function(){
                                out(table,this,this.row,this.col);
                            };
                            arr[j].onmousedown = function(){
                                down(table,this,this.row,this.col);
                            };
                            arr[j].onmouseup = function(){
                                up(table,this,this.row,this.col);
                            };              
                            arr[j].onclick = function(){
                                click(table,this,this.row,this.col);
                            };                              
                        };
                    };
                };
                
                // appyling mouseover state for objects (th or td)
                this.over = function(table,obj,row,col){
                    if (!highlightCols && !highlightRows) obj.className = obj.css + " over";  
                    if(check1(obj,col)){
                        if(highlightCols) highlightCol(table,obj,col);
                        if(highlightRows) highlightRow(table,obj,row);      
                    };
                };
                // appyling mouseout state for objects (th or td)   
                this.out = function(table,obj,row,col){
                    if (!highlightCols && !highlightRows) obj.className = obj.css; 
                    unhighlightCol(table,col);
                    unhighlightRow(table,row);
                };
                // appyling mousedown state for objects (th or td)  
                this.down = function(table,obj,row,col){
                    obj.className = obj.css + " down";  
                };
                // appyling mouseup state for objects (th or td)    
                this.up = function(table,obj,row,col){
                    obj.className = obj.css + " over";  
                };  
                // onclick event for objects (th or td) 
                this.click = function(table,obj,row,col){
                    if(check1){
                        if(selectable) {
                            unselect(table);    
                            if(highlightCols) highlightCol(table,obj,col,true);
                            if(highlightRows) highlightRow(table,obj,row,true);
                            document.onclick = unselectAll;
                        }
                    };
                    clickAction(obj);       
                };      
                
                this.highlightCol = function(table,active,col,sel){
                    var css = (typeof(sel) != "undefined") ? "selected" : "over";
                    var tr = table.getElementsByTagName("tr");
                    for (var i=0;i<tr.length;i++){  
                        var arr = new Array();
                        for(j=0;j<tr[i].childNodes.length;j++){             
                            if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
                        };                          
                        var obj = arr[col];
                        if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;         
                    };
                };
                this.unhighlightCol = function(table,col){
                    var tr = table.getElementsByTagName("tr");
                    for (var i=0;i<tr.length;i++){
                        var arr = new Array();
                        for(j=0;j<tr[i].childNodes.length;j++){             
                            if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j])
                        };              
                        var obj = arr[col];
                        if(check3(obj)) obj.className = obj.css; 
                    };
                };  
                this.highlightRow = function(table,active,row,sel){
                    var css = (typeof(sel) != "undefined") ? "selected" : "over";
                    var tr = table.getElementsByTagName("tr")[row];     
                    for (var i=0;i<tr.childNodes.length;i++){       
                        var obj = tr.childNodes[i];
                        if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;         
                    };
                };
                this.unhighlightRow = function(table,row){
                    var tr = table.getElementsByTagName("tr")[row];     
                    for (var i=0;i<tr.childNodes.length;i++){
                        var obj = tr.childNodes[i];         
                        if(check3(obj)) obj.className = obj.css;            
                    };
                };
                this.unselect = function(table){
                    tr = table.getElementsByTagName("tr")
                    for (var i=0;i<tr.length;i++){
                        for (var j=0;j<tr[i].childNodes.length;j++){
                            var obj = tr[i].childNodes[j];  
                            if(obj.className) obj.className = obj.className.replace("selected","");
                        };
                    };
                };
                this.unselectAll = function(){
                    if(!tableover){
                        tables = document.getElementsByTagName("table");
                        for (var i=0;i<tables.length;i++){
                            unselect(tables[i])
                        };      
                    };
                };  
                this.check1 = function(obj,col){
                    return (!(col == 0 && obj.className.indexOf("empty") != -1));
                }
                this.check2 = function(active,obj){
                    return (!(active.tagName == "TH" && obj.tagName == "TH")); 
                };
                this.check3 = function(obj){
                    return (obj.className) ? (obj.className.indexOf("selected") == -1) : true; 
                };  
                
                start();
                
            };

            /* script initiates on page load. */
            window.onload = tablecloth;
        
        </script>
    </head>
    <body>
        <div id="page">
            <div id="explanation">
                <h4>Beispieltabelle mit aktiviertem TableCloth</h4>
                <p>Als Ergebnis erhält man (ohne den Tabellenquelltext zu ändern) eine vorgestaltete Tabelle, welche die Zeilen beim Überfahren hervorhebt und auf Klick selektiert.</p>
                
                <!-- Beispiel-Tabelle -->
                <div class="simon" style="width:550px">
                    <div class="tablecloth">
                        <table border="1">
                            <caption>Vereinsmitglieder</caption>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Wohnort</th>
                                    <th>Bundesland</th>
                                    <th>Alter</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Franz</td>
                                    <td>München</td>
                                    <td>Bayern</td>
                                    <td>45</td>
                                </tr>
                                <tr>
                                    <td>Friedrich</td>
                                    <td>Augsburg</td>
                                    <td>Bayern</td>
                                    <td>33</td>
                                </tr>
                                <tr>
                                    <td>Kalle</td>
                                    <td>Berlin</td>
                                    <td>Berlin</td>
                                    <td>35</td>
                                </tr>
                                <tr>
                                    <td>Heinz</td>
                                    <td>Frankfurt a.M.</td>
                                    <td>Hessen</td>
                                    <td>68</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Weitere ähnliche Artikel

Tabellen im Web – Teil 1 – Eine Einführung

Einige Erläuterungen zu den Möglichkeiten und Notwendigkeiten der Gestaltung von Tabellen im Web, für alle diejenigen, die sich auch an ordentlichen Tabellen in Drucksachen erfreuen würden und ebenfalls der Meinung sind, dass das Web dem nicht zu weit nachstehen sollte. [lesen]

Tabellen im Web – Teil 2 – Die richtige Code-Struktur

Voraussetzung für die effektive Arbeit an der Abbildung einer Tabelle im Web ist eine strukturierte Vorbereitung. Nach der obligatorischen gedanklichen Einarbeitung und Strukturierung der Vorlage, kann sich der Gestalter an die konkrete Umsetzung und Definition der Grundstruktur der Tabelle mittels (X)HTML wagen. [lesen]

Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML

Obwohl man heute dank CSS (aktuell in Version 2) die Möglichkeit hat, Inhalt und Design strikt voneinander zu trennen, ist es dennoch möglich, alleine mit (X)HTML-Angaben auf das Erscheinungsbild der Tabelle Einfluss zu nehmen. [lesen]

Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS

Geht es darum, gezielt in das Erscheinungsbild einer Tabelle einzugreifen, spielt CSS seine Stärken aus. Seit CSS der Version 2 sind im Standard vielfältige Funktionen zur visuellen Anpassung von Tabellen vorgesehen, die größtenteils auch bereits in den aktuellen Versionen der gängigen Browser implementiert wurden. [lesen]

Tabellen im Web – Teil 5 – Interaktion

Einen nennenswerten Vorteil von tabellarischen Darstellungen im Web stellt die Möglichkeit dar, Inhalte interaktiv zu präsentieren. Tabellen lassen sich mit Hilfe von nutzerseitigen Scriptsprachen (JavaScript) mit Zusatzfunktionen belegen, welche den Nutzwert erheblich erhöhen können. [lesen]

Über den Autor: Thomas
Thomas ist Diplom-Designer (FH) und arbeitet derzeit als Flash Developer/Screendesigner in Frankfurt a.M. Seine Fachgebiete sind interaktive Medien und Design.
Profilseite betrachten