womstar
Lounge-Member
Da der vorgänger Performancefressend war, hier jetzt das Update zum Cellreader.
Er ist nicht nur Performanter geworden, sondern ist jetzt auch für folgende browser zu gebrauchen:
ie4, ie5, ie6, ns6, ns7, opera5, opera6, opera7, mozilla, firefox
Kommentare zum Code folgen in kürze.
Zum betrachten:
http://www.build.more-style.de/cellreader/
Er ist nicht nur Performanter geworden, sondern ist jetzt auch für folgende browser zu gebrauchen:
ie4, ie5, ie6, ns6, ns7, opera5, opera6, opera7, mozilla, firefox
Kommentare zum Code folgen in kürze.
Code:
<html>
<head>
<script>
String.prototype.str_replace = function(s,r) {
var str = this;
if(typeof s == "object" && typeof r == "object") {
for(var x in s)
str = str.replace(eval("/\\"+s[x]+"/ig"),r[x]);
}
if(typeof s == "object" && typeof r == "string") {
for(var x in s)
str = str.replace(eval("/\\"+s[x]+"/ig"),r);
}
if(typeof s == "string" && typeof r == "string") {
str = str.replace(eval("/\\"+s+"/ig"),r);
}
return str;
};
cellReader = function() {
this.inserts = new Array();
/*************** EIGENSCHAFTEN ***************/
this.headCol = new Array("Runde/Name","Günter","Johnas","Sebastian","Jochen","Falk");
this.footCol = new Array("Platz","1. Platz","2. Platz","3. Platz","4. Platz","5. Platz");
this.sideRow = new Array("Runde1","Runde2","Runde3","Runde4","Runde5","Runde6","Runde7","Runde8");
this.inserts[0] = new Array("Falk","Günter","Johnas","Jochen","Sebastian");
this.inserts[1] = new Array("Sebastian","Jochen","Günter","Johnas","Falk");
this.inserts[2] = new Array("Günter","Sebastian","Johnas","Falk","Jochen");
this.inserts[3] = new Array("Jochen","Günter","Johnas","Falk","Sebastian");
this.inserts[4] = new Array("Falk","Günter","Sebastian","Johnas","Jochen");
this.inserts[5] = new Array("Günter","Falk","Johnas","Jochen","Sebastian");
this.inserts[6] = new Array("Jochen","Johnas","Falk","Günter","Sebastian");
this.inserts[7] = new Array("Günter","Jochen","Johnas","Falk","Sebastian");
var $_fontSize = new String("11px");
var $_fontFace = new String("arial");
var $_fontStil = new String("normal");
var $_fontColor = new String("#000000");
var $_fontDescColor = new String("#000000");
var $_borderSize = new String("1px");
var $_borderColor = new String("#666666");
var $_backgroundColor = new String("#cccccc");
var $_hoverColor = new String("#efefef");
var $_cellHeadColor = new String("#999999");
var $_cellFootColor = new String("#999999");
var $_cellSideColor = new String("#999999");
var $_fieldWidth = new String("100px");
var $_fieldHeight = new String("20px");
/***********************************************/
var _output = new String();
var _search = new Array("ä","ü","ö","ß","-","/","."," ");
var _replac = new Array("ae","ue","oe","ss","_","_","_","_");
var _objekt;
_output += "<table cellspacing='"+$_borderSize+"' cellpadding='"+$_borderSize+"' border='0' bgcolor='"+$_borderColor+"' style='cursor:default'>";
_output += "<tr>";
for(var x=0; x<this.headCol.length; x++) {
_output += "<td id='"+((x>0) ? "main||"+this.headCol[x].str_replace(_search,_replac) : "")+"' ";
_output += "align='center' ";
_output += "width='"+$_fieldWidth+"' height='"+$_fieldHeight+"' ";
_output += "bgcolor='"+$_cellHeadColor+"' ";
_output += "style='font:"+$_fontStil+" "+$_fontSize+" "+$_fontFace+";color:"+$_fontDescColor+"'";
if(x>0) {
_output += " onmouseover='document.getElementById(\"obj\").getGroupIn(this)'";
_output += " onmouseout='document.getElementById(\"obj\").setGroupOut(this)'";
}
_output += ">";
if(x==0) {
_output += "<div id='obj'>";
}
_output += "<b>"+this.headCol[x]+"</b>";
if(x==0) {
_output += "</div>";
}
_output += "</td>";
}
_output += "</tr>";
for(var z=0,x=0; x<this.inserts.length; x++) {
_output += "<tr>";
for(var y=0; y<this.inserts[x].length+1; y++) {
if(y==0) {
_output += "<td ";
_output += "align='center' ";
_output += "width='"+$_fieldWidth+"' height='"+$_fieldHeight+"' ";
_output += "bgcolor='"+$_cellHeadColor+"' ";
_output += "style='font:"+$_fontStil+" "+$_fontSize+" "+$_fontFace+";color:"+$_fontDescColor+"'";
_output += "><b>";
_output += this.sideRow[x];
_output += "</b></td>";
}
if(y>=1) {
_output += "<td id='sub"+z+"||"+this.inserts[x][(y-1)].str_replace(_search,_replac)+"' ";
_output += "align='center' ";
_output += "width='"+$_fieldWidth+"' height='"+$_fieldHeight+"' ";
_output += "bgcolor='"+$_backgroundColor+"' ";
_output += "style='font:"+$_fontStil+" "+$_fontSize+" "+$_fontFace+";color:"+$_fontColor+"'";
_output += " onmouseover='document.getElementById(\"obj\").getGroupIn(this)'";
_output += " onmouseout='document.getElementById(\"obj\").setGroupOut(this)'";
_output += ">";
_output += this.inserts[x][(y-1)];
_output += "</td>";
z++;
}
}
_output += "</tr>";
}
_output += "<tr>";
for(var x=0; x<this.headCol.length; x++) {
_output += "<td ";
_output += "align='center' ";
_output += "width='"+$_fieldWidth+"' height='"+$_fieldHeight+"' ";
_output += "bgcolor='"+$_cellHeadColor+"' ";
_output += "style='font:"+$_fontStil+" "+$_fontSize+" "+$_fontFace+";color:"+$_fontDescColor+"'";
_output += "><b>";
_output += this.footCol[x];
_output += "</b></td>";
}
_output += "</tr>";
_output += "</table>";
document.write(_output);
_objekt = document.getElementById("obj");
_objekt.cells = z;
_objekt.hoverColor = $_hoverColor;
_objekt.mainCellColor = $_cellHeadColor;
_objekt.subCellColor = $_backgroundColor;
_objekt.getGroupIn = function(t) {
var n = String(t.id).split("||")[1];
for(var x=0; x<this.cells; x++) {
var o = document.getElementById("sub"+x+"||"+n);
if(o!=undefined) {
o.style.background = ""+this.hoverColor+"";
}
}
document.getElementById("main||"+n).style.background = ""+this.hoverColor+"";
};
_objekt.setGroupOut = function(t) {
var n = String(t.id).split("||")[1];
for(var x=0; x<this.cells; x++) {
var o = document.getElementById("sub"+x+"||"+n);
if(o!=undefined) {
o.style.background = ""+this.subCellColor+"";
}
}
document.getElementById("main||"+n).style.background = ""+this.mainCellColor+"";
};
};
</script>
</head>
<body>
<script>
new cellReader();
</script>
</body>
</html>Zum betrachten:
http://www.build.more-style.de/cellreader/
