Java-Programmierung zum Schreiben eines äußerst praktischen JavaScript-Tabellen-Plugins

//Tabellenfabrik var tableFactory = function(type){
	if (diese Instanz von tableFactory) {
		gib einen neuen this[Typ]() zurück;
	}anders{
		return new tableFactory(type); //Verhindert die Situation, in der „new“ nicht geschrieben wird }
}
tableFactory.prototype = {	
	Diagrammform: Funktion () {
		var html = ''; //Private Eigenschaften this.loadParams = function(opts){
			var jsonArr = []; //JSON-Array var icount = 0; //Wird zur Steuerung der Zeilenfarbe verwendet var rowHeaderArr = []; //Array der ersten Spalte jeder Zeile formatieren if (opts.jsonArr) {
				: Dies ist die Datei, die Sie in jsonArr erstellen möchten.
			}
			wenn (opts.rowHeaderArr) {
				: rowHeaderArr = opts.rowHeaderArr;
			}
			var colNum = jsonArr.length; //Gesamtzahl der Spalten aufzeichnen var rowNum = rowHeaderArr.length - 1; //Gesamtzahl der Zeilen (ohne die erste Zeile)			
			html = "<TABELLE id='Tabelle' style=\"border-collapse:collapse;border-spacing:0;border:1px solid #ccc;font-size:12px;text-align:center;\" >"+
								"<TBODY><TR> "+
									"<TD >&nbsp;</TD>"; //Das leere TD in der oberen linken Ecke
						
			//Buchstabiere die erste Zeile for(var i = 0;i < colNum;i++){
				var c1 = jsonArr[i].c1;
				html += '<TD style="border:1px solid #ccc;height:14px;background-color:#e2fdfe;font-size:14px;font-weight:bold;padding:3px;" >' + c1 + '</TD>';
			}
			html += '</TR><TR>';
			für(var i = 0;i < rowNum + 1;i++){
				//Zeilenüberschrift buchstabieren var colorBox = rowHeaderArr[i].split(',')[0];
				var hearderText = rowHeaderArr[i].split(',')[1];
				html += "<TD Klasse='colorBox' Stil='padding:3px;Höhe:14px;Rand:1px durchgezogen #ccc;Breite:66px;Textausrichtung:Mitte;'><div Stil='border-radius:2px 2px 2px 2px;Anzeige:inline-block;Breite:12px;Höhe:12px;Hintergrundfarbe:"+colorBox+";float:links;'></div>"+hearderText+"</TD>";
				//Buchstabiere alle Spalten rechts von dieser Zeile for(var j = 0;j < colNum;j++){
					//alarm(i);
					var colValue = jsonArr[j]['c'+(i+2)];
					var tdBreite;					
					wenn(Spaltennummer <= tableFactory.TD_WIDTHS.Länge)
						tdWidth = tableFactory.TD_WIDTHS[colNum-1];
					anders 
						tdWidth = tableFactory.TD_WIDTHS[tableFactory.TD_WIDTHS.Länge - 1];
					console.info(tdWidth);
					wenn(i%2 == 0){
						html += '<TD-Stil = "Höhe: 14px; Rahmen: 1px durchgezogen #ccc; Breite:'+ tdWidth +'px; Textausrichtung: Mitte; Hintergrundfarbe:#e2fdfe;">'+colValue+'</TD>'; 
					}anders{
						html += '<TD-Stil = "Höhe: 14px; Rahmen: 1px durchgezogen #ccc; Breite:'+ tdWidth +'px; Textausrichtung: Mitte; Hintergrundfarbe: #fff;">'+ colValue +'</TD>'; 
					}					 
				}
				
				//Zeilenumbruch html += '</tr><tr>';				
			}
			html += '</TR><TR>';
			html += '</TR>';
			html += '</TBODY></TABLE>';
		} ;
		this.loadData = Funktion(Haus-ID,Rückruf){
			document.getElementById(houseId).innerHTML = html; //Tabelle anzeigen
			wenn(Rückruf) Rückruf();
		}
	}
}
	TabelleFactory.TD_WIDTHS = [220,190,150,120,90,60,10];

<script src='common.js'></script>
<div id='TB' Klasse='TB'></div>
<div id='TB1' Klasse='TB'></div>
<div id='TB2' Klasse='TB'></div>
<div id='TB3' Klasse='TB'></div>
<div id='TB4' Klasse='TB'></div>
<Stil>
    .TB {
		Polsterung: 6px;
	}
</Stil>
<Skript>
	var chartForm = tableFactory('chartForm');
	chartForm.loadParams({
						jsonArr: [
										{c1:'Peking',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'Shanghai',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'Henan',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'Hebei',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Nordosten',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Sichuan',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Kreis',c2:2,c3:6,c4:3,c5:1,c6:6}
									],
						rowHeaderArr: [
											'#000CCC,Gesamtzahl der Aufgaben', //Zeilenname '#990033,Phase der Projekterstellung',
											'#66FF00, Inspektionsphase',
											'#663399, Testphase',
											„#33CCFF, Meldephase“
									  ]
					});

	chartForm.loadData('TB');
	chartForm.loadParams({
						jsonArr: [
										{c1:'Peking',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'Shanghai',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'Henan',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'Hebei',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Nordosten',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'Sichuan',c2:2,c3:6,c4:3,c5:1,c6:6},
									],
						ZeilenkopfzeilenArr: [
											'#000CCC,Gesamtzahl der Aufgaben', //Zeilenname '#990033,Phase der Projekterstellung',
											'#66FF00, Inspektionsphase',
											'#663399, Testphase',
											„#33CCFF, Meldephase“
									  ]
					});
	chartForm.loadData('TB1');
	chartForm.loadParams({
						jsonArr: [
										{c1:'Peking',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'Shanghai',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'Henan',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'Hebei',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Nordosten',c2:2,c3:6,c4:3,c5:1,c6:6},
									],
						rowHeaderArr: [
											'#000CCC,Gesamtzahl der Aufgaben', //Zeilenname '#990033,Phase der Projekterstellung',
											'#66FF00, Inspektionsphase',
											'#663399, Testphase',
											„#33CCFF, Meldephase“
									  ]
					});
	chartForm.loadData('TB2');
</Skript>