Problem mit innerHTML

Anima · 08.07.2011, 20:14

Nabend,
ich habe, wie im Titel beschrieben, ein Problem mit der Methode innerHTML. Ich habe folgendes Script:

Code:

<!DOCTYPE html>
<html>
	<head>
		<script type='text/javascript'>
		document.getElementById('preview').innerHTML = '<table border=\'1\'><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td></tr></table>';
		</script>
		<title>HTML Tabellengenerator</title>
	</head>
	<body>
		<h1>HTML Tabellengenerator</h1><br>
		<b>Tabelle anpassen:</b><br><br>
		<form id='settings'>
			Zeilen: <input type='text' size='3' value='3' id='rows'>
			Spalten: <input type='text' size='3' value='2' id='cols'>
			<input type='button' value='Verändern' onclick='changeValues();'>
		</form><br>
		<b>Vorschau:</b><br><br>
		<div id='preview'>
		</div><br><br>
		<b>HTML-Code:</b><br><br>
		<textarea rows='15' cols='40' id='code'></textarea>
	</body>
</html>

Die zugehörige Tabelle, die bei Seitenaufruf im Div angezeigt werden müsste wird aber nicht angezeigt. Kann mir jemand sagen, woran das liegt?

nikosch · 08.07.2011, 20:18

Dass Preview zum Zeitpunkt der Ausführung nicht existiert. LEUTE! Benutzt die Fehlerkonsole! Das Forum ist nicht Euer Privat-Debugger!

tr0y · 08.07.2011, 23:49

Wozu per Javascript "onLoad" etwas ins HTML einfügen, statt es direkt da rein zu schreiben ? Müffelt bissl nach "idiotisch".

nikosch · 09.07.2011, 00:18

Zitat:

<title>HTML Tabellengenerator</title>

Dürfte das Ziel erklären.

tr0y · 09.07.2011, 23:31

Jau, ist nur relativ unsinnig, wenn man in dem Script nix "generiert" sondern eher "Injiziert"...

Ich würde mir was das generieren von Tabellen angeht, nicht mit purem Javascript die Finger schmutzig machen, sondern auf jQuery oder MooTools zurückgreifen, mit dem man ohne viel Fingergebreche einfach und ohne großartiges Escape-Armageddon Tabellen(-Zeilen/-Zellen) anfügen kann.

Wenn man dabei auf "ist vielleicht an im Browser"-Javascript verzichten kann, den gesamten Schmarn per PHP erzeugen.

Alles in allem, so wie der source oben steht ist der <script>-Tag sinnfrei.

nikosch · 10.07.2011, 09:29

Ich gehe mal davon aus, dass das Script eine erste Annäherung an das Thema darstellt.

Anima · 13.07.2011, 17:14

Naja, habe das Problem mittlerweile ein wenig anders gelöst. Der Codeschnipsel im <script> sollte lediglich eine dynamische Tabellenvorschau erzeugen.

So sieht der finale Source Code aus (an vielen Stellen etwas umständlich, aber es funktioniert):

HTML-Code:

<!DOCTYPE html>
<html>
	<head>
		<script type='text/javascript'>
		function checkBtype() {
			document.getElementById('bcol').disabled = false;
			document.getElementById('bpower').disabled = false;
			if(document.forms[0].btype.options[document.forms[0].btype.selectedIndex].value == 'none') {
				document.getElementById('bcol').value = '#F0F0F0';
				document.getElementById('bcol').disabled = true;
				document.getElementById('bpower').value = 0;
				document.getElementById('bpower').disabled = true;
			}
		}
		
		function Reset() {
			document.getElementById('rows').value = '';
			document.getElementById('cols').value = '';
			document.getElementById('code').value = '';
			document.getElementById('thead').value = '';
			document.getElementById('bgcol').value = '';
			document.getElementById('bcol').value = '';
			document.forms[0].btype.options[document.forms[0].btype.selectedIndex].value = 'solid';
			document.getElementById('bpower').value = '';
			document.getElementById('chead').checked = false;
		}
		
		function genTableCode() {
			var i, j;
			var act = null;
			var r = document.getElementById('rows');
			var c = document.getElementById('cols');
			var code = document.getElementById('code');
			var thead = document.getElementById('thead');
			var bgcol = document.getElementById('bgcol');
			var bcol = document.getElementById('bcol');
			var btype = document.forms[0].btype.options[document.forms[0].btype.selectedIndex];
			var bpower = document.getElementById('bpower');
			var chead = document.getElementById('chead');
			code.value = '';
			
			if(r.value == '' || c.value == '' || r.value > 100 || c.value > 100) {
				r.value = 3;
				c.value = 2;
				thead.value = 'Beispieltabelle';
				bgcol.value = '#FFFFFF';
				bcol.value = '#000000';
				btype.value = 'solid';
				bpower.value = 1;
				chead.checked = true;
			}
			
			if(bcol.value != '' && bgcol.value != '' && bpower.value != '') {
					code.value += '<table border=\''+ bpower.value +'px\' style=\'background-color:'+ bgcol.value +'; border-color:'+ bcol.value +'; border-style:'+ btype.value +';\'>\n';
			}
			else {
				if(bcol.value != '' && bgcol.value != '') {
					code.value += '<table style=\'background-color:'+ bgcol.value +'; border-color:'+ bcol.value +'; border-style:'+ btype.value +';\'>\n';
				}
				if(bcol.value != '' && bpower.value != '') {
					code.value += '<table border=\''+ bpower.value +'px\' style=\'border-color:'+ bcol.value +'; border-style:'+ btype.value +';\'>\n';
				}
				if(bgcol.value != '' && bpower.value != '') {
					code.value += '<table border=\''+ bpower.value +'px\' style=\'background-color:'+ bgcol.value +'; border-style:'+ btype.value +';\'>\n';
				}
				else {
					if(bcol.value != '') {
						code.value += '<table style=\'border-color:'+ bcol.value +'; border-style:'+ btype.value +';\'>\n';
					}
					if(bgcol.value != '') {
						code.value += '<table style=\'background-color:'+ bgcol.value +'; border-style:'+ btype.value +';\'>\n';
					}
					if(bpower.value != '') {
						code.value += '<table style=\'border:'+ bpower.value +'; border-style:'+ btype.value +';\'>\n';
					}
					else {
						code.value += '<table border=\''+ bpower.value +'px\'>\n';
					}
				}
			}
			if(thead.value != '') {
				code.value += '<caption>'+ thead.value +'</caption>\n';
			}
			if(chead.checked != false) {
				code.value += '<tr>\n';
				for(i = 1; i <= c.value; i++) {
					code.value += '<th>Überschrift '+ i +'</th>\n';
				}
				code.value += '</tr>\n';
			}
			
			for(i = 1; i <= r.value; i++) {
				code.value += '<tr>\n';
				for(j = 1; j <= c.value; j++) {
					var act = act + 1;
					code.value += '<td>Zelle '+ act +'</td>\n';
				}
				code.value += '</tr>\n';
			}
			code.value += '</table>\n';
		}
		
		function showPreview() {
			var code = document.getElementById('code').value;
			var win = window.open('','messageWindow','scrollbars=yes,width=600,height=400');
			win.document.write(code);	
			code.value = '';
		}
		</script>
		<style type='text/css'>
		body {
			background-color:#FFCC66;
			font-family:Arial;
		}
		
		h1 {
			color:#330000;
		}
		
		caption {
			color:#663300;
		}
		</style>
		<title>HTML Tabellengenerator</title>
	</head>
	<body>
		<h1>HTML Tabellengenerator</h1><br>
		<table border='0px'>
			<caption><b>Tabelleneigenschaften</b></caption>
			<tr>
				<td>Zeilen:</td>
				<td><input type='text' size='14' id='rows'></td>
			</tr>
			<tr>
				<td>Spalten:</td>
				<td><input type='text' size='14' id='cols'></td>
			</tr>
			<tr>
				<td>Überschrift:</td>
				<td><input type='text' size='14' id='thead'></td>
			</tr>
			<tr>
				<td>Spaltenüberschriften:</td>
				<td><input type='checkbox' id='chead'></td>
			</tr>
			<tr>
				<td>Hintergrundfarbe:</td>
				<td><input type='text' size='14' id='bgcol'></td>
			</tr>
			<tr>
				<td>Rahmentyp:</td>
				<td>
					<form>
						<select name='btype' onchange='checkBtype();'>
							<option value='solid'>durchgezogen</option>
							<option value='dotted'>gepunktet</option>
							<option value='dashed'>gestrichelt</option>
							<option value='none'>kein Rahmen</option>
						</select>
					</form>
				</td>
			</tr>
			<tr>
				<td>Rahmenfarbe:</td>
				<td><input type='text' size='14' id='bcol'></td>
			</tr>
			<tr>
				<td>Rahmenstärke (in px):</td>
				<td><input type='text' size='14' id='bpower'></td>
			</tr>
			<tr>
				<td><input type='button' value='Generieren' onclick='genTableCode();'></td>
			</tr>
		</table><br>
		<b><span style='color:#663300;'>HTML-Code:</span></b><br>
		<form id='options'>
			<textarea rows='10' cols='50' id='code'></textarea><br>
			<input type='button' value='Zurücksetzen' onclick='Reset();'>
			<input type='button' value='Vorschau' onclick='showPreview();'>
		</form><br>
		<small><b>Copyright &copy; 2011 <a href='http://manuweb.taess.net'>Manuel J.</a></b></small>
	</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.07.2011, 20:18
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Dass Preview zum Zeitpunkt der Ausführung nicht existiert. LEUTE! Benutzt die Fehlerkonsole! Das Forum ist nicht Euer Privat-Debugger! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.07.2011, 23:49
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Wozu per Javascript "onLoad" etwas ins HTML einfügen, statt es direkt da rein zu schreiben ? Müffelt bissl nach "idiotisch". __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

09.07.2011, 23:31
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Jau, ist nur relativ unsinnig, wenn man in dem Script nix "generiert" sondern eher "Injiziert"... Ich würde mir was das generieren von Tabellen angeht, nicht mit purem Javascript die Finger schmutzig machen, sondern auf jQuery oder MooTools zurückgreifen, mit dem man ohne viel Fingergebreche einfach und ohne großartiges Escape-Armageddon Tabellen(-Zeilen/-Zellen) anfügen kann. Wenn man dabei auf "ist vielleicht an im Browser"-Javascript verzichten kann, den gesamten Schmarn per PHP erzeugen. Alles in allem, so wie der source oben steht ist der <script>-Tag sinnfrei. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

10.07.2011, 09:29
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich gehe mal davon aus, dass das Script eine erste Annäherung an das Thema darstellt. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --