nicht angemeldet
Unerklärliches Verhalten Mozilla Firefox
0 
MudGuard
Unerklärliches Verhalten Mozilla Firefox
Hallo,
ich habe ein tolles Script zum - an und für sich - sehr einfachen Sortieren von Tabellen gefunden:
http://neil.fraser.name/software/tablesort/
Ich habe den Code soweit reduziert, so dass ich nur noch die Tabelle mit Einbindung der Sortier-
Anweisungen habe.
Wenn ich die reduzierte Datei direkt aus meinem Browser heraus aufrufe, dann klappt alles einwandfrei,
aber wenn ich die reduzierte Datei über einen <iframe> aufrufe, dann kann ich nicht mehr alle Spalten
sortieren.
Auf obiges Beispiel umgelegt:
Beim Aufrufen der Datei über einen <iframe> kann ich nur noch die letzten beiden Spalten "Score" und
"Email" sortieren.
Dieses Verhalten ist mir absolut unerklärlich, da der Code entweder funktionieren oder nicht
funktionieren müsste, aber nur halb ?!?
Ich hoffe sehr, ihr könnt mir bei der Klärung weiterhelfen.
Vielen Dank im Voraus.
Gruß,
Enrico
-
Hi,
Ich habe den Code soweit reduziert, so dass ich nur noch die Tabelle mit Einbindung der Sortier-
Anweisungen habe.Wenn ich die reduzierte Datei direkt aus meinem Browser heraus aufrufe, dann klappt alles einwandfrei,
aber wenn ich die reduzierte Datei über einen <iframe> aufrufe, dann kann ich nicht mehr alle Spalten
sortieren.Aha. Und wo können wir uns das anschauen?
Ich hoffe sehr, ihr könnt mir bei der Klärung weiterhelfen.
Solange Du uns _Deinen_ Code nicht zeigst (am Besten zwei Links, einen auf die Seite ohne und einen auf die Seite mit iframe), nicht.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
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 ↩︎
-
Hallo,
... erklären kann ich das Verhalten auch nicht genau, aber deine Sortierbefehle sind weniger optimal
<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'>";hier beachte, dass Objekt Tablesort heisst:
Tablesort.arrownone = ...
Tablesort.arrowup = ...<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>hier wird die Sortierfunktion festgelegt, numerisch oder aphabetisch (casesensitiv oder nicht)
keine Ahnung was rauskommen kann, wenn man den Titel numerisch sortiert, wahrscheinlich bleibt die Spalte ungeordnet.
Gruß plan_B
--
*®*´¯`·.¸¸.·
-