Entwickler-Ecke

Programmiersprachen (Client) - Javascript Tabellen sortieren: Fehler: Objekt erwartet!


Wolle92 - Di 08.07.08 10:31
Titel: Javascript Tabellen sortieren: Fehler: Objekt erwartet!
Hallo,

ich möchte mit Javascript eine Tabelle sortieren, die gleiche Routine funktioniert mit mehrdimensionalen Arrays bei PHP (Tabellen sind ja im Grund auch mehrdimensionale Arrays) auch...
Ich bekomme vom Internetexplorer (bei FF gehts auch nicht) immer die Fehlermeldung, das in der Zeile, in der der Link steht zum sortieren, ein Objekt erwartet wird...

Hier mal der Code:

Quelltext
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:
<html>
  <head>
    <title>Sort-Test</title>
    <script type="text/javascript" language="javascript">
      var columns = Array();

      function initColumnData(){
        if(document.getElementById("GridView1")){
          columns = document.getElementById("GridView1").getElementsByTagName("tr")[0].cells;
        }
      }

      function sort(column, order){
        for(var i = 1; i < document.getElementById("GridView1").getElementsByTagName("tr").length-1; i++){
          for(var j = i; j < document.getElementById("GridView1").getElementsByTagName("tr").length; j++){
            if(order == "asc"){
              if(document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[column].innerHTML > document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[column].innerHTML){
                var buffer = document.getElementById("GridView1").getElementsByTagName("tr")[i];
                document.getElementById("GridView1").getElementsByTagName("tr")[i] = document.getElementById("GridView1").getElementsByTagName("tr")[j];
                document.getElementById("GridView1").getElementsByTagName("tr")[j] = buffer;
              }
            }else{
              if(document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[column].innerHTML < document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[column].innerHTML){
                var buffer = document.getElementById("GridView1").getElementsByTagName("tr")[i];
                document.getElementById("GridView1").getElementsByTagName("tr")[i] = document.getElementById("GridView1").getElementsByTagName("tr")[j];
                document.getElementById("GridView1").getElementsByTagName("tr")[j] = buffer;
              }
            }
          }
        }
      }
    </script>
  </head>
  <body onLoad="initColumnData()">
    <table id="GridView1" border="1">
      <tr>
        <td>a <a href="#" onClick="sortTable(0,'asc');">a</a> <a href="#" onClick="sortTable(0,'desc');">v</a></td>
        <td>b <a href="#" onClick="sortTable(1,'asc');">a</a> <a href="#" onClick="sortTable(1,'desc');">v</a></td>
        <td>c <a href="#" onClick="sortTable(2,'asc');">a</a> <a href="#" onClick="sortTable(2,'desc');">v</a></td>
      </tr>
      <tr>
        <td>1</td>
        <td>3</td>
        <td>2</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>1</td>
      </tr>
      <tr>
        <td>3</td>
        <td>1</td>
        <td>3</td>
      </tr>
    </table>
  </body>
</html>


ZeitGeist87 - Di 08.07.08 10:41

Wie schau mal:

Wie heißt die Funktion? Und welche Funktion rufst du auf...


Wolle92 - Di 08.07.08 10:52

Oh, da ist nen table reingerutsch...

Hab ich weggemacht, jetzt sagt der mir, das das Objekt die methode nicht unterstützt...

Hab ich mir gedacht: Vielleicht kann ich die Zeilen nicht als ganzes kopieren, also cell für cell verschieben:

C#-Quelltext
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:
function sortTable(column, order){
        for(var i = 1; i < document.getElementById("GridView1").getElementsByTagName("tr").length-1; i++){
          for(var j = i; j < document.getElementById("GridView1").getElementsByTagName("tr").length; j++){
            if(order == "asc"){
              if(document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[column].innerHTML > document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[column].innerHTML){
                var buffer = Array();
                for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.lenght; k++){
                  buffer[k] = document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k];
                }
                for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.lenght; k++){
                  document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k] = document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k];
                }
                for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.lenght; k++){
                  document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k] = buffer[k];
                }
              }
            }else{
              if(document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[column].innerHTML < document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[column].innerHTML){
                var buffer = Array();
                for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.lenght; k++){
                  buffer[k] = document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k];
                }
                for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.lenght; k++){
                  document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k] = document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k];
                }
                for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.lenght; k++){
                  document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k] = buffer[k];
                }
              }
            }
          }
        }
      }


Vorteil: Ich kriege keinen Fehler mehr
Nachteil: Es passiert nichts...


ZeitGeist87 - Di 08.07.08 11:03

super..du holst dir das Objekt und schreibst es in den Buffer..

.cells[column].innerHTML fehlt ;-)

Dann klappt's auch mit dem Sortieren..


Wolle92 - Di 08.07.08 11:10

dann hab ich einen unbekannten laufzeitfehler in der zeile wo die eine Spalte der anderen zugewiesen wird...


ZeitGeist87 - Di 08.07.08 11:16

Komisch..bei mir funktioniert es tadellos..


Wolle92 - Di 08.07.08 11:17

im FF funktionierts bei mir auch...
leider musses im IE funktionieren...


ZeitGeist87 - Di 08.07.08 11:20

gerade getestet..funktioniert ebenso fehlerfrei..


Wolle92 - Di 08.07.08 11:23

ööööhhhh...
muss mal kurz neuesten IE installieren...


ZeitGeist87 - Di 08.07.08 11:25

ich hab Version 6 drauf..kein Fehler!

zeig mal deinen Code..


Wolle92 - Di 08.07.08 11:30

ich hab noch version 5 drauf...


Wolle92 - Di 08.07.08 11:37

mit IE7 funktioniert es aber auch nicht...
ICh muss mal grad ultracomparen... deinen und meinen code...


Wolle92 - Di 08.07.08 11:43

okay, fehler gefunden... nur wieso sortiert dein code auch die anderen spalten, wenn du cells[column] benutzt??

Edit: tuts ja gar nicht... soll es aber...


ZeitGeist87 - Di 08.07.08 11:46

Spalten?

Bei mir werden nur die Zeilen sortiert..und zwar richtig :eyes:


Wolle92 - Di 08.07.08 11:49

also wenn ich eins anklicke bei dir, dann wird das zwar sortiert also steht unter a dann 1, 2, 3...
aber die anderen spalten, b und c, die bleiben wie sie sind..

das ist suboptimal, wenn man eine Liste mit Telefonbuch-ergebnissen sortieren will ;)

es soll ja ncht nur die splate "column" sortiert werden...


ZeitGeist87 - Di 08.07.08 11:53

What the Hell??

Ich klink mich jez mal aus..denn ich versteh nicht, was du möchtest..warum bitte hast du dann in den anderen Kopfzeilen die Sortierlinks drin?
Dann kannst du gleich alles in eine Zelle schreiben.

Das was du willst ist wahrscheinlich so


Quelltext
1:
2:
3:
Müller - 123
Vogel - 456
Bauer - 789


Alphabetisch sortiert:


Quelltext
1:
2:
3:
Bauer - 789
Müller - 456
Vogel - 123


Seh ich das richtig?


Wolle92 - Di 08.07.08 12:01

ja, aber man solle sauch nach anderen spalten sortieren können...

Und bei deinem Script wird nur die angeklickte spalte sortiert...

also aus


Quelltext
1:
2:
3:
4:
a b c
1 3 2
2 2 1
3 1 3


wird, wenn man nach "b" sortiert bei dir nur:


Quelltext
1:
2:
3:
4:
a b c
1 1 2
2 2 1
3 3 3


es muss aber:


Quelltext
1:
2:
3:
4:
a b c
3 1 3
2 2 1
1 3 2


werden, in jeder zeile gehören die 3 werte zusammen, und müssen auch zusammen verschoben werden...


ZeitGeist87 - Di 08.07.08 12:03

Soweit hab ich dein Problem dann doch verstanden :eyes:

Ich denk mal beim Mittagessen nach..in ner halben Stunde..


Wolle92 - Di 08.07.08 12:08

okay, ich ess jetzt grade mein brötchen... aber ist schon ok...


Wolle92 - Di 08.07.08 12:35

hab die lösung:

C#-Quelltext
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:
function sortTable(column, order){
        for(var i = 1; i < document.getElementById("GridView1").getElementsByTagName("tr").length-1; i++){
          for(var j = i; j < document.getElementById("GridView1").getElementsByTagName("tr").length; j++){
            if(i != j){
              if(order == "asc"){
                if(document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[column].innerHTML > document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[column].innerHTML){
                  var buffer = Array();
                  for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.length; k++){
                    buffer[k] = document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k].innerHTML;
                    document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k].innerHTML = document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k].innerHTML;
                    document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k].innerHTML = buffer[k];
                  }
                }
              }else{
                if(document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[column].innerHTML < document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[column].innerHTML){
                  var buffer = Array();
                  for(var k = 0; k < document.getElementById("GridView1").getElementsByTagName("tr")[i].cells.length; k++){
                    buffer[k] = document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k].innerHTML;
                    document.getElementById("GridView1").getElementsByTagName("tr")[i].cells[k].innerHTML = document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k].innerHTML;
                    document.getElementById("GridView1").getElementsByTagName("tr")[j].cells[k].innerHTML = buffer[k];
                  }
                }
              }
            }
          }
        }
      }


Wenn es sein muss, dann muss man man jede einzelne zelle mit der der anderen reihe vertauschen...


ZeitGeist87 - Di 08.07.08 12:40

Oder so:


C#-Quelltext
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:
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function setDataType(cValue)
  {
    //Konvertiert die Inhalte der Zellen, damit richtig sortiert werden kann
    var isDate = new Date(cValue);
    if (isDate == "NaN")
      {
        if (isNaN(cValue))
          {
            //Zeichenkette ist ein String -> alles in Großbuchstaben
            cValue = cValue.toUpperCase();
            return cValue;
          }
        else
          {
            //Zeichenkette ist numerisch
            var myNum;
            myNum = String.fromCharCode(48 + cValue.length) + cValue;
            return myNum;
          }
        }
  else
      {
        //Datum
        var myDate = new String();
        myDate = isDate.getFullYear() + " " ;
        myDate = myDate + isDate.getMonth() + " ";
        myDate = myDate + isDate.getDate(); + " ";
        myDate = myDate + isDate.getHours(); + " ";
        myDate = myDate + isDate.getMinutes(); + " ";
        myDate = myDate + isDate.getSeconds();
        return myDate ;
      }
  }
function sortTable(col, tableToSort)
  {
    var iCurCell = col + tableToSort.cols;
    var totalRows = tableToSort.rows.length;
    var bSort = 0;
    var colArray = new Array();
    var oldIndex = new Array();
    var indexArray = new Array();
    var bArray = new Array();
    var newRow;
    var newCell;
    var i;
    var c;
    var j;
    // Aktuelle Daten der Tabelle in Array überführen
    for (i=1; i < tableToSort.rows.length; i++)
      {
        colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
        iCurCell = iCurCell + tableToSort.cols;
      }
    // Arrayelemente kopieren
    for (i=0; i < colArray.length; i++)
      {
        bArray[i] = colArray[i];
      }
    //Die Items sortieren
    colArray.sort();
    for (i=0; i < colArray.length; i++)
      { //Schleife für neusortiertes Array
        indexArray[i] = (i+1);
        for(j=0; j < bArray.length; j++)
          { //Altes Array durchgehen
            if (colArray[i] == bArray[j])
              {  ///Sortierung
                for (c=0; c<i; c++)
                  {
                    if ( oldIndex[c] == (j+1) )
                    {
                      bSort = 1;
                    }
                      }
                      if (bSort == 0)
                        {
                          oldIndex[i] = (j+1);
                        }
                          bSort = 0;
                        }
          }
    }
  //Sortierung fertig
  for (i=0; i<oldIndex.length; i++)
    {
      newRow = tableToSort.insertRow();
      for (c=0; c<tableToSort.cols; c++)
        {
          newCell = newRow.insertCell();
          newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
        }
      }
  //Neue Zeilen an den Tabellenanfang setzen
  for (i=1; i<totalRows; i++)
    {
      tableToSort.moveRow((tableToSort.rows.length -1),1);
    }
  //Alten Zeilen am Ende löschen
  for (i=1; i<totalRows; i++)
    {
      tableToSort.deleteRow();
    }
  }

</script>

</HEAD>

<BODY>

<TABLE WIDTH="49%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable  cols=5>
  <TR bgcolor=#CCCCCC> 
    <TD width="8%"><A href="javascript:sortTable(0, rsTable);"><FONT color=white><B>ID</FONT></B></A></TD>
    <TD width="12%"><A href="javascript:sortTable(1, rsTable);"><FONT color=white><B>Name</FONT></B></A></TD>
    <TD width="17%"><A href="javascript:sortTable(2, rsTable);"><FONT color=white><B>Geburtstag</FONT></B></A></TD>
    <TD width="15%"><A href="javascript:sortTable(3, rsTable);"><FONT color=white><B>Telefon</FONT></B></A></TD>
    <TD width="48%"><A href="javascript:sortTable(4, rsTable);"><FONT color=white><B>Zimmernummer</FONT></B></A></TD>
  </TR></FONT>
  <TR> 
    <TD>1</TD>
    <TD>Müller</TD>
    <TD>01.02.1903</TD>
    <TD>123-456-789</TD>
    <TD>112</TD>
  </TR>
  <TR> 
    <TD>2</TD>
    <TD>Vogel</TD>
    <TD>04.05.1906</TD>
    <TD>987-654-321</TD>
    <TD>911</TD>
  </TR>
  <TR> 
    <TD>3</TD>
    <TD>Adam</TD>
    <TD>07.08.1909</TD>
    <TD>123-987-456</TD>
    <TD>999</TD>
  </TR>
</TABLE>
</BODY>
</HTML>


Wolle92 - Di 08.07.08 13:03

Hab jetzt aber ein ganz anderes Problem:
Das Script soll zum soriteren eines Telefonbuchs dienen...

Wenn dieses Telefonbuch aber 1140 Einträge hat, dann wirds lustig:

Lass mal ein Javascript 494.497.990 Vergleiche und bis zu 6.922.971.860 Tabellenzellen-Austausche durchführen...


ZeitGeist87 - Di 08.07.08 13:09

so..jez meine frage..woher kommen die Daten?


Wolle92 - Di 08.07.08 13:17

Die kommen schon vorher ausm Active Directory, über ASP.Net...


ZeitGeist87 - Di 08.07.08 13:21

Dann sortier mit ASP.NET..ganz einfach..

Kannst ja über ASP das aufrufen und die Daten so sortieren lassen, wie du willst.

Auf jedenfall ist Javascript dafür echt ungeeignet..


Wolle92 - Di 08.07.08 13:22

ok...
ich werd mal schauen, was ich da machen kann...


Wolle92 - Di 08.07.08 13:33

bumm... wie kann ich GET-Parameter mit ASP.Net auslesen??


ZeitGeist87 - Di 08.07.08 13:39

Neue Frage -> Neuer Thread..


Wolle92 - Di 08.07.08 13:42

jaja... schon gut...


war das nicht "neue frage, ab inne SB"?