bambi: Anpassung eines Skripts -> Img-Tag wird als Text interpretiert

SELF-Forum

Anpassung eines Skripts -> Img-Tag wird als Text interpretiert

bambi
– Informationen zu den Bewertungsregeln

Hallo zusammen

Ich habe hier: http://www.j-berkemeier.de/TableSort.html ein Skript gefunden, über welches man sehr einfach eine dynamische Sortierung von HTML-Tabellen integrieren kann.

Das Skript verwendet als Sortier-Zeichen vorhandene Zeichen (z.B. String.fromCharCode(8593);). Ich möchte nun aber stattdessen eigene Grafiken einbinden.

Mein Problem ist, dass die eingefügten Image-Tags vom Browser nicht als Tag erkannt werden, weil aus dem <-Zeichen z.B. ein &lt; wird. Ich bekomme als Ausgabe im Quelltext dann z.B. &lt;img src="images/sort_auf_aktiv.gif" width="7" height="7" border="0" alt="" /&gt; statt <img src="images/sort_auf_aktiv.gif" width="7" height="7" border="0" alt="" />

Wenn ich die Grafik z.B. mit innerHTML einbinde, klappt es...? Ich hab's auch schon mit einfachen und doppelten Backslashs versucht, aber das bringt auch nichts.

Hat jemand eine Idee, was ich ändern muss, damit die Klammern nicht umgewandelt werden?

Vielen Dank für die Mühe!
Bambi

Hier kommt der Code (von mir bereits angepasst, Original siehe Link oben)

  
// TableSort 8.4  
// Jürgen Berkemeier, 19. 2. 2008  
// www.j-berkemeier.de  
( function() {  
var JB_Table=function(tab) {  
// var up = String.fromCharCode(160,9650);  
// var down = String.fromCharCode(160,9660);  
// var up = String.fromCharCode(160,8593);  
// var down = String.fromCharCode(160,8595);  
// var no = String.fromCharCode(160,160,160,160);  
  
 var IconAuf_inaktiv = "<img src=\"images/sort_auf_inaktiv.gif\" width=\"7\" height=\"7\" border=\"0\" alt=\"\">";  
 var IconAuf_aktiv = "<img src=\"images/sort_auf_aktiv.gif\" width=\"7\" height=\"7\" border=\"0\" alt=\"\" />";  
 var IconAb_inaktiv = "<img src=\"images/sort_ab_inaktiv.gif\" width=\"7\" height=\"7\" border=\"0\" alt=\"\">";  
 var IconAb_aktiv = "<img src=\"images/sort_ab_aktiv.gif\" width=\"7\" height=\"7\" border=\"0\" alt=\"\">";  
  
 var dieses=this;  
 var Init_Sort=function(nr) {  
  t.style.cursor="pointer";  
  t.onclick = function() { dieses.sort(nr); }  
  t.appendChild(document.createTextNode(IconAuf_inaktiv + IconAb_inaktiv));  
  if(t.className.indexOf("vorsortiert-")>-1) {  
   t.lastChild.data=IconAuf_inaktiv + IconAb_aktiv;  
   ssort=nr;  
  }  
  else if(t.className.indexOf("vorsortiert")>-1) {  
   t.lastChild.data=IconAuf_aktiv + IconAb_inaktiv;  
   ssort=nr;  
  }  
 } // Init_Sort  
 var VglFkt=function(a,b) {  
  var as=a[ssort], bs=b[ssort];  
  var ret=(as>bs)?1:(as<bs)?-1:0;  
  if(!ret && ssort) {  
   as=a[0]; bs=b[0];  
   ret=(as>bs)?1:(as<bs)?-1:0;  
  }  
  return ret;  
 }  
 var convert=function(val) {  
  var dmy;  
  var trmdat = function() {  
   if(dmy[0]<9) dmy[0] = "0"+dmy[0];  
   if(dmy[1]<9) dmy[1] = "0"+dmy[1];  
   if(dmy[2]<9) dmy[2] = "200"+dmy[2];  
   else if(dmy[2]<20) dmy[2] = "20"+dmy[2];  
   else if(dmy[2]<99) dmy[2] = "19"+dmy[2];  
   else if(dmy[2]>9999) dmy[2] = "9999";  
  }  
  if(!isNaN(val)) return parseFloat(val);  
  var n = val.replace(",",".")  
  if(!isNaN(n)) return parseFloat(n);  
  n = n.replace(/\s|&nbsp;|&#160;|\u00A0/g,"");  
  if(!isNaN(n)) return n;  
  if(!val.search(/^\s*\d+\s*\.\s*\d+\s*\.\s*\d+\s+\d+:\d\d\s*$/)) {  
   var dp = val.search(":");  
   dmy = val.substring(0,dp-2).split(".");;  
   dmy[3] = val.substring(dp-2,dp);  
   dmy[4] = val.substring(dp+1,dp+3);  
   for(var i=0;i<5;i++) dmy[i] = parseInt(dmy[i],10);  
   trmdat();  
   if(dmy[3]<10) dmy[3] = "0"+dmy[3];  
   if(dmy[4]<10) dmy[4] = "0"+dmy[4];  
   return parseFloat((""+dmy[2]+dmy[1]+dmy[0]+"."+dmy[3]+dmy[4]).replace(/ /g,""));  
  }  
  if(!val.search(/^\s*\d+\s*\.\s*\d+\s*\.\s*\d+/)) {  
   dmy = val.split(".");  
   for(var i=0;i<3;i++) dmy[i] = parseInt(dmy[i],10);  
   trmdat();  
   return parseFloat((""+dmy[2]+dmy[1]+dmy[0]).replace(/ /g,""));  
  }  
  if(!val.search(/^\s*\d+:\d\d\s*$/)) {  
   dmy = val.split(":");  
   for(var i=0;i<2;i++) dmy[i] = parseInt(dmy[i],10);  
   if(dmy[0]<10) dmy[0] = "0"+dmy[0];  
   if(dmy[1]<10) dmy[1] = "0"+dmy[1];  
   return parseFloat((""+dmy[0]+dmy[1]).replace(/ /g,""));  
  }  
  return val.toLowerCase().replace(/\u00e4/g,"ae").replace(/\u00f6/g,"oe").replace(/\u00fc/g,"ue").replace(/\u00df/g,"ss");  
 } // convert  
 this.sort=function(sp) {  
  if (first) {  
   for(var z=0;z<nzeilen;z++) {  
    var zelle=tz[z].cells;  
    Arr[z]=new Array(nspalten+1);  
    Arr[z][nspalten]=tz[z];  
    for(var s=0;s<nspalten;s++) {  
     var zi=convert(JB_elementText(zelle[s]));  
     Arr[z][s]=zi ;  
    }  
   }  
   first=0;  
  }  
  if(sp==ssort) {  
   Arr.reverse() ;  
   if ( Titel[ssort].lastChild.data==IconAuf_inaktiv + IconAb_inaktiv )  
    Titel[ssort].lastChild.data=IconAuf_aktiv + IconAb_inaktiv;  
   else if ( Titel[ssort].lastChild.data==IconAuf_aktiv + IconAb_inaktiv )  
    Titel[ssort].lastChild.data=IconAuf_inaktiv + IconAb_aktiv;  
   else if ( Titel[ssort].lastChild.data==IconAuf_inaktiv + IconAb_aktiv )  
    Titel[ssort].lastChild.data=IconAuf_aktiv + IconAb_inaktiv;  
  }  
  else {  
   if ( ssort>=0 && ssort<nspalten ) Titel[ssort].lastChild.data=IconAuf_inaktiv + IconAb_inaktiv;  
   ssort=sp;  
   Arr.sort(VglFkt);  
   Titel[ssort].lastChild.data=IconAuf_aktiv + IconAb_inaktiv;  
  }  
  for(var z=0;z<nzeilen;z++)  
   tbdy.appendChild(Arr[z][nspalten]);  
 } // sort  
 var first=1;  
 var ssort;  
 var tbdy=tab.getElementsByTagName("tbody")[0];  
 var tz=tbdy.rows;  
 var nzeilen=tz.length;  
 var nspalten=tz[0].cells.length;  
 var Titel=tab.getElementsByTagName("thead")[0].getElementsByTagName("tr")[0].getElementsByTagName("th");  
 var Arr=new Array(nzeilen);  
 var ct=0;  
 for(var i=0;i<Titel.length;i++) {  
  var t=Titel[i];  
  if(t.className.indexOf("sortierbar")>-1 || t.className.indexOf("vorsortiert")>-1) {  
   ct++;  
   Init_Sort(i);  
  }  
 }  
 if(ct==0) {  
  for(var i=0;i<Titel.length;i++) {  
   var t=Titel[i];  
   Init_Sort(i);  
  }  
 }  
} // JB_Table  
var JB_addEvent=function(oTarget, sType, fpDest) {  
 var oOldEvent = oTarget[sType];  
 if (typeof oOldEvent != "function") {  
  oTarget[sType] = fpDest;  
  } else {  
   oTarget[sType] = function(e) {  
   oOldEvent(e);  
   fpDest(e);  
  }  
 }  
}  
var JB_getElementsByClass_TagName=function(tagname,classname) {  
 var tag=document.getElementsByTagName(tagname);  
 var Elements=new Array();  
 for(var i=0;i<tag.length;i++) {  
  if(tag[i].className.indexOf(classname)>-1) Elements[Elements.length]=tag[i];  
 }  
 return Elements;  
}  
var JB_elementText = function(elem) {  
 var eT = function(ele) {  
  var uele=ele.firstChild;  
  while(uele) {  
   if(uele.hasChildNodes()) eT(uele);  
   if(uele.nodeType == 1) Text += " ";  
   else if(uele.nodeType == 3) Text += uele.data;  
   uele = uele.nextSibling;  
  }  
 }  
 var Text="";  
 eT(elem);  
 return Text.replace(/\s+/g," ");  
}  
JB_addEvent(window,"onload",function(e) {  
 if (!document.getElementsByTagName) return;  
 if (!document.getElementsByTagName('body')[0].appendChild) return;  
 var Sort_Table=JB_getElementsByClass_TagName("table","sortierbar");  
 for(var i=0;i<Sort_Table.length;i++) new JB_Table(Sort_Table[i]);  
});  
})();
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Anpassung eines Skripts -> Img-Tag wird als Text interpretiert

    ritschmanhard
    – Informationen zu den Bewertungsregeln

    Hi Bambi!

    In aller Kürze:
    Das grundsätzliche Problem liegt daran, dass ein <img> ein Knoten ist und "bla" nur Text.
    Somit ist korrekt:
    t.appendChild(document.createTextNode("bla")) weil ein Text Knoten erzeugt wird.
    Für einen <img> Knoten ist z.B. folgendes Konstrukt korrekt (alt Attribut fehlt noch...):
    img=document.createElement("img");
    src=document.createAttribute("src");
    src.nodeValue = "images/sort_auf_inaktiv.gif";
    img.setAttributeNode(src);
    t.appendChild(img);

    Als weiteres Problem funktioniert auch (...)[.lastChild].data nur mit Textknoten. Auch hier ist eine Anpassung notwendig.

    Viele Grüsse,
    Richard

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Anpassung eines Skripts - noch eine Frage

      bambi
      – Informationen zu den Bewertungsregeln

      Hallo Richard

      Erst mal ganz herzlichen Dank für Deine Antwort!

      Dein Tipp, dass ich die Bilder erst mal mit createElement erstellen muss, war schon mal Gold wert.

      Mit dem Ersatz für (...)[.lastChild].data komme ich allerdings nicht wirklich zurecht. Ich hab mir gedacht, dass ich jedem Icon eine ID geben könnte (hab ich auch gemacht). So kann ich z.B. statt
      if(t.className.indexOf("vorsortiert-")>-1) {
         t.lastChild.data=IconAuf_inaktiv + IconAb_aktiv;
         ssort=nr;
        }

      neu

      if(t.className.indexOf("vorsortiert-")>-1) {
         document.getElementById('icon_ab_' + nr).src = IconAb_aktiv;
         ssort=nr;
        }

      schreiben. Das klappt auch wie gewünscht.

      Aber bei diesem Code-Block scheitere ich:
      if(sp==ssort) {
         Arr.reverse() ;
         if ( Titel[ssort].lastChild.data==IconAuf_inaktiv + IconAb_inaktiv )
          Titel[ssort].lastChild.data=IconAuf_aktiv + IconAb_inaktiv;
         else if ( Titel[ssort].lastChild.data==IconAuf_aktiv + IconAb_inaktiv )
          Titel[ssort].lastChild.data=IconAuf_inaktiv + IconAb_aktiv;
         else if ( Titel[ssort].lastChild.data==IconAuf_inaktiv + IconAb_aktiv )
          Titel[ssort].lastChild.data=IconAuf_aktiv + IconAb_inaktiv;
        }
        else {
         if ( ssort>=0 && ssort<nspalten ) Titel[ssort].lastChild.data=IconAuf_inaktiv + IconAb_inaktiv;
         ssort=sp;
         Arr.sort(VglFkt);
         Titel[ssort].lastChild.data=IconAuf_aktiv + IconAb_inaktiv;
        }

      Eigentlich müsste ich ja auch hier "nur" die beiden src-Attribute anpassen. Aber ich weiss nicht, wie ich überhaupt auf die Bilder zugreifen kann. Über getElementById klappt es ja nicht, weil ich die ID nicht kenne...

      Kannst Du (oder sonst eine gute Seele) mir bitte nochmals einen Tipp geben, wie ich zum Ziel komme?

      Herzlichen Dank und liebe Grüsse
      Bambi

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Anpassung eines Skripts - noch eine Frage

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo bambi,

        Eigentlich müsste ich ja auch hier "nur" die beiden src-Attribute anpassen. Aber ich weiss nicht, wie ich überhaupt auf die Bilder zugreifen kann. Über getElementById klappt es ja nicht, weil ich die ID nicht kenne...

        du schreibst doch, dass du den Bildern eine ID gegeben hasst: 'icon_ab_' + nr. nr ist die Spaltennummer. Du musst jetzt nur noch wissen, welch Spalte als letzte sortiert wurde (steht in ssort) und welche sortiert werden soll (steht in sp).

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Anpassung eines Skripts - Danke!

          bambi
          – Informationen zu den Bewertungsregeln

          Hallo Jürgen

          Das ist aber nett, dass Du gleich selber antwortest! Mit Deinen hilfreichen Tipps habe ich's nun hinbekommen. *freu* :-)

          Vielen Dank für dieses Skript und für Deine Hilfe!

          Bambi

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Anpassung eines Skripts - Danke!

            JürgenB Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo bambi,

            Vielen Dank für dieses Skript und für Deine Hilfe!

            gern geschehen. Schick mir mal einen Link zur Seite, ich würde gerne mal sehen, wie es aussieht.

            Gruß, Jürgen

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Anpassung eines Skripts -> Img-Tag wird als Text interpretiert

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo bambi,

    so einfach geht das nicht. Das habe ich auch garnicht vorgesehen.

    Du musst an den Stellen, wo der Textknoten mit dem Symbol erzeugt und eingehängt wird, ein Bild erzeugen, einhängen und diesem den entsprechenden src geben. Das Bild sollte auch eine eindeutige ID haben, damit es später angesprochen werden kann. An den Stellen, wo der Inhalt des Textknotens geändert wird, musst du dann den src der entsprechenden Bilder ändern.

    Ungetesteter Code, falls Methoden nicht bekannt, bitte nachlesen:

    var Bild = document.createElement("img");
    Bild.id = "JB_Sort_up_"+nr;
    Bild.src = "images/sort_auf_inaktiv.gif"

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln