nicht angemeldet
Hallo Andreas,
ich poste den Code, Webspace habe ich keinen (die Seite läuft nur lokal ab):
<html> <head> <title>dvd-verwaltung</title> <link rel="stylesheet" type="text/css" href="bibliotheken/css/anzeige.css"> </head> <body> <div id="container_1"> <div id="container_2"> <div id="navcontainer"> <ul id="navlist"> <li><a id="current">alle filme</a></li> <li><a href="#">#</a></li> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> <li><a href="#">f</a></li> <li><a href="#">g</a></li> <li><a href="#">h</a></li> <li><a href="#">i</a></li> <li><a href="#">j</a></li> <li><a href="#">k</a></li> <li><a href="#">l</a></li> <li><a href="#">m</a></li> <li><a href="#">n</a></li> <li><a href="#">o</a></li> <li><a href="#">p</a></li> <li><a href="#">q</a></li> <li><a href="#">r</a></li> <li><a href="#">s</a></li> <li><a href="#">t</a></li> <li><a href="#">u</a></li> <li><a href="#">v</a></li> <li><a href="#">w</a></li> <li><a href="#">x</a></li> <li><a href="#">y</a></li> <li><a href="#">z</a></li> </ul> </div> <div id="content"> <div style="width:100%; height:100%"> <script language="javascript" type="text/javascript" src='bibliotheken/javascript/tabelle_sortieren.js'></script> <script language="javascript" type="text/javascript"> <!-- tablesort.arrownone = " <img height=10 width=10 src='grafiken/blank.gif'>"; tablesort.arrowup = " <img height=10 width=10 src='grafiken/absteigend_sortiert.gif'>"; tablesort.arrowdown = " <img height=10 width=10 src='grafiken/aufsteigend_sortiert.gif'>"; //--> </script> <table class="datenbank"> <thead> <tr> <th label="nocase">dvd-nr.</th> <th label="num">titel</th> <th label="case">inhalt</th> <th label="nocase">genre</th> <th label="num">fsk</th> </tr> </thead> <tbody> <tr> <td>brian</td> <td>male</td> <td>92%</td> <td><a href="mailto:info@example.net">info@example.net</a></td> </tr> <tr> <td>lisa</td> <td>female</td> <td>82%</td> <td><a href="mailto:info@example.net">info@example.net</a></td> </tr> <tr> <td>arthur</td> <td>male</td> <td>85%</td> <td>n/a</td> </tr> <tr> <td>zoltran</td> <td>male</td> <td>9%</td> <td><a href="mailto:zoltran@example.com">zoltran@example.com</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
Die zugehörige JS-Datei:
var TableSort = {};
// Default text values for the arrows. Override these with custom image tags. TableSort.arrowNone = " "; TableSort.arrowUp = " ↑"; TableSort.arrowDown = " ↓";
TableSort.tables = []; TableSort.lastSort = [];
if (window.onload) TableSort.oldOnload = window.onload;
window.onload = function() { TableSort.init();
if (TableSort.oldOnload) TableSort.oldOnload(); }
TableSort.init = function() { if (navigator.appName == "Microsoft Internet Explorer" && navigator.platform.indexOf("Mac") == 0) return;
if (arguments.length == 0) { var tableNodeList = document.getElementsByTagName('TABLE');
for (var x = 0; x < tableNodeList.length; x++) { TableSort.tables.push(tableNodeList[x]); TableSort.initTable(x); } } else { var table;
for (var x = 0; x < arguments.length; x++) { table = document.getElementById(arguments[x]);
if (table) { TableSort.tables.push(table); TableSort.initTable(TableSort.tables.length - 1); } } } }
TableSort.initTable = function(t) { var table = TableSort.tables[t];
if (table.tHead) { for (var y = 0; y < table.tHead.rows.length; y++) { for (var x = 0; x < table.tHead.rows[y].cells.length; x++) TableSort.linkCell(table.tHead.rows[y].cells[x], t, x, y); } }
if (table.tFoot) { for (y = 0; y < table.tFoot.rows.length; y++) { for (x = 0; x < table.tFoot.rows[y].cells.length; x++) TableSort.linkCell(table.tFoot.rows[y].cells[x], t, x, y); } }
TableSort.lastSort[t] = 0; }
// Turn one header/footer cell into a sorting link. TableSort.linkCell = function(cell, t, x, y) { if (TableSort.getLabel(cell)) { var link = document.createElement('A'); link.href = "#Sort_" + t + "" + x; link.title = "Sort by this column"; link.onclick = new Function("TableSort.click(" + t + ", " + x + ", "" + escape(TableSort.getLabel(cell)) + ""); return false"); cell.appendChild(link); for (var c = 0; c < cell.childNodes.length - 1; c++) { link.appendChild(cell.childNodes[c]); } // Add an element where the sorting arrows will go. var arrow = document.createElement('SPAN'); arrow.innerHTML = TableSort.arrowNone; arrow.name = "TableSort" + t + "" + x + "" + y; cell.appendChild(arrow); } }
// Return the 'label' attribute for a cell. // Opera won't let us make up novel attribute names, // so 'label' is picked because it is obscure. TableSort.getLabel = function(cell) { var str; if (window.opera) { // Opera 7 & 8 have a bug with getAttribute, // so this is an ugly hack to sidestep it. var m = cell.outerHTML.match(/^<[^>]+LABEL=['"]([^'" ]+)['"]/i); str = m ? m[1] : ""; } else { str = cell.getAttribute('label'); } return str ? str.toLowerCase() : ''; }
// Sort the rows in this table by the specified column. TableSort.click = function(table, column, mode) { if (!mode.match(/[1]+$/)) { alert("Illegal sorting mode type."); return; } var compareFunction = eval("TableSort.compare_" + mode); if (typeof compareFunction != "function") { alert("Unknown sorting mode: " + mode); return; } // Determine and record the direction. var reverse = false; if (Math.abs(TableSort.lastSort[table]) == column + 1) { reverse = TableSort.lastSort[table] > 0; TableSort.lastSort[table] = -TableSort.lastSort[table]; } else { TableSort.lastSort[table] = column+1; } // Display the correct arrows on every header/footer cell. var spans = document.getElementsByTagName('SPAN'); var spanprefix1 = "TableSort_" + table + ""; var spanprefix2 = "TableSort" + table + "_" + column; for (var s = 0; s < spans.length; s++) { if (spans[s].name && spans[s].name.substring(0, spanprefix1.length) == spanprefix1) { if (spans[s].name.substring(0, spanprefix2.length) == spanprefix2) { if (TableSort.lastSort[table] > 0) { spans[s].innerHTML = TableSort.arrowDown; } else { spans[s].innerHTML = TableSort.arrowUp; } } else { spans[s].innerHTML = TableSort.arrowNone; } } } // Fetch the table's data and store it in a dictionary (assoc array). if (TableSort.tables[table].tBodies.length < 1) { return; // No data in table. } var tablebody = TableSort.tables[table].tBodies[0]; var cellDictionary = []; var cell; for (var y = 0; y < tablebody.rows.length; y++) { if (tablebody.rows[y].cells.length > 0) { cell = tablebody.rows[y].cells[column]; } else { // Dodge Safari 1.0.3 bug cell = tablebody.rows[y].childNodes[column]; } cellDictionary[y] = [TableSort.dom2txt(cell), tablebody.rows[y]]; } // Sort the dictionary. cellDictionary.sort(compareFunction); // Rebuild the table with the new order. var i; for (y = 0; y < cellDictionary.length; y++) { i = reverse ? (cellDictionary.length - 1 - y) : y; tablebody.appendChild(cellDictionary[i][1]); } if (window.opera) { // Opera needs to rerender the last row due to a redraw bug. setTimeout(function() { // This is a closure. tablebody.appendChild(tablebody.removeChild( tablebody.rows[tablebody.rows.length - 1])); }, 1); } }
// Recursively build a plain-text version of a DOM structure. // Bug: whitespace isn't always correct, but shouldn't matter for tablesort. TableSort.dom2txt = function(obj) { var text = ""; if (!obj) { return ""; } if (obj.nodeType == 3) { text = obj.data; } else { for (var x = 0; x < obj.childNodes.length; x++) { text += TableSort.dom2txt(obj.childNodes[x]); } } return text; }
// Case-sensitive sorting. // Compare two dictionary structures and indicate which is larger. TableSort.compare_case = function(a, b) { if (a[0] == b[0]) { return 0; } return (a[0] > b[0]) ? 1 : -1; }
// Case-insensitive sorting. // Compare two dictionary structures and indicate which is larger. TableSort.compare_nocase = function(a, b) { var aLower = a[0].toLowerCase(); var bLower = b[0].toLowerCase(); if (aLower == bLower) { return 0; } return (aLower > bLower) ? 1 : -1; }
// Numeric sorting. // Compare two dictionary structures and indicate which is larger. TableSort.compare_num = function(a, b) { var aNum = parseFloat(a[0]); if (isNaN(aNum)) { aNum = -Number.MAX_VALUE; } var bNum = parseFloat(b[0]); if (isNaN(bNum)) { bNum = -Number.MAX_VALUE; } if (aNum == bNum) { return 0; } return (aNum > bNum) ? 1 : -1; }
Ich verstehe dieses Verhalten absolut nicht.
Ich habe das gleiche Verhalten auch bei Einbettung in einen DIV. Wenn die Spalten breiter sind, dann klappt es, aber sobald sie zu klein sind, nicht mehr. In der Online-Version sind sie aber nur so groß wie notwendig.
Gruß Enrico
_a-z0-9 ↩︎
MudGuard