ie-tauglich ab Version 5.0

Aufsteigend sortierbare Zellenspalten

Anmerkung 1: Die Seite wird jedes Mal neu geschreiben, wenn eine Spalte sortiert wird. Große Tabellen brauchen einige Zeit zum Sortieren.
Anmerkung 2: Das Script sortiert nur die jeweilige Spalte, die anderen Spalten werden von der Sotierung nicht berührt.
Anmerkung 3: Die »Bearbeitung« der Tabelleninhalte im Quelltext ist gewöhnungsbedürftig, letztlich aber einfacher, da keine HTML-Syntax erwartet wird.

Der Quellcode besteht aus zwei Teilen.

	Position in der html-Datei: head-Bereich
<script type="text/javascript"> <!-- function SortableTable(id,rows,cols,border,width,align) { this.id = id this.rows = rows this.cols = cols this.border = border this.width = width this.align = align this.buttons = new Array(cols) this.numeric = new Array(cols) for(var i=0;i<cols;++i) this.buttons[i]="Ý" for(var i=0;i<cols;++i) this.numeric[i]=false this.data = new Array(rows) for(var i=0;i<rows;++i) { this.data[i] = new Array(cols) for(var j=0;j<cols;++j) this.data[i][j] = "Ý" } this.display = SortableTable_display this.setButtons = SortableTable_setButtons this.setData = SortableTable_setData this.setNumeric = SortableTable_setNumeric this.sort = SortableTable_sort } function SortableTable_setData(data) { if(data == null) return if(data.length > 0) { for(var i=0;i<this.rows;++i) { if(i>=data.length) break if(data[i] != null) { var n = data[i].length if(n > this.cols) n = this.cols for(var j=0;j<n;++j) if(data[i][j]!=null) this.data[i][j] = data[i][j] } } } } function SortableTable_setButtons(buttons) { if(buttons == null) return var n = buttons.length if(n > this.cols) n = this.cols for(var i=0;i<n;++i) if(buttons[i]!=null) this.buttons[i] = buttons[i] } function SortableTable_display() { // Check for tableSortBy cookie if(document.cookie.length > 0) { var search = this.id + "=" var offset = document.cookie.indexOf(this.id+"=") if(offset != -1) { offset += search.length var end = document.cookie.indexOf(";", offset) if(end == -1) end = document.cookie.length this.sort(document.cookie.substring(offset, end)) } } document.writeln('<form name="tableForm">') document.write('<table border="'+this.border+'" width="') document.writeln(this.width+'" align="'+this.align+'">') document.writeln('<tr>') // Display buttons for(var i=0;i<this.cols;++i) { document.write('<td class="formu">') document.write('<input type="button" class="button" value="') document.write(this.buttons[i]) document.write('" onclick="SortableTable_handleColumnButton(\'') document.write(this.id+'\','+i+')">') document.writeln('<\/td>') } document.writeln('<\/tr>') // Display sorted/unsorted table for(var i=0;i<this.rows;++i) { document.writeln('<tr>') for(var j=0;j<this.cols;++j) { document.write('<td class="code">') document.write(this.data[i][j]) document.writeln('<\/td>') } document.writeln('<\/tr>') } document.writeln('<\/table>') document.writeln('<\/form>') } function SortableTable_setNumeric(n) { this.numeric[n] = true } function SortableTable_sort(n) { // Sort rows var changes=true for(;changes;) { changes = false for(var i=0;i<this.rows-1;++i) { if(this.numeric[n]) { var v1 = parseFloat(this.data[i][n]) if(isNaN(v1)) v1 = 0; var v2 = parseFloat(this.data[i+1][n]) if(isNaN(v2)) v2 = 0; if(v1 > v2) { changes = true var temp = this.data[i] this.data[i] = this.data[i+1] this.data[i+1] = temp } }else{ if(this.data[i][n] > this.data[i+1][n]) { changes = true var temp = this.data[i] this.data[i] = this.data[i+1] this.data[i+1] = temp } } } } } function SortableTable_handleColumnButton(id,n) { // Set cookie and reload document.cookie = id + "="+n window.location.reload() } //--> </script>

	Position in der html-Datei: body-Bereich
<script type="text/javascript"> <!-- var buttons = new Array("Index","Marke","Typ","Kilometer","Monate","Interesse") var data = new Array( new Array("1","Volkswagen","Golf","290000","26","hoch"), new Array("2","Ford","Fiesta","085000","22","niedrig"), new Array("3","Opel","Corsa","125000","8","mittel"), new Array("4","Peugeot","306","010000","1","niedrig"), new Array("5","Renault","Clio","005000","0","niedrig") ) // Variablen: id,rows,cols,border,width,align var table = new SortableTable("myTable",5,6,1,"100%","center") table.setData(data) table.setButtons(buttons) // Use table.setNumeric(n) to sort column n in numerical order. table.display() document.write("Zeilen : "+ data.length +"<br>"); document.write("Spalten : "+ data[0].length); //--> </script>

Quelle: javascripts.earthweb.com//repository//webdev/content/software/2000/02/14/JS_24607/script24607.html - nicht mehr erreichbar Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten