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

Beitrag lesen

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