Inhalt (HTML-Quellcode) der Tabelle in ein Hidden-Input-Feld übergeben

[Maik20]

Hallo,

ich habe eine Internetseite auf der eine Tabelle eingebunden ist:

<table name="daten"><tr><td>Test</td></tr></table>

Ich möchte jetzt mit einem Click auf einen Button den gesamten Inhalt (HTML-Quellcode) der Tabelle in ein Hidden-Input-Feld packen und per Formular absenden. Wie kann ich den Quellcode der Tabelle in das Input-Feld übertragen und gibt es dabei ggf. Probleme was die größe der Tabelle anbetrifft?

 

[kroesi]

Hi !

Auf den inneren HTML-Code eines HTML-Elements kannst du mittels der Eigenschaft "innerHTML" zugreifen.
In deinem Fall etwa so :

var htmlCode = document.getElementsByName("daten")[0].innerHTML;

Diesen String kannst du dann in ein Formular schreiben und am besten mittels der Methode "Post" verschicken. POST schreibt deine Formulareinträge in den HTTP-Header und ist daher theoretisch nicht in der Grösse beschränkt (im Gegensatz zu der Methode "GET", welche deine Daten an die URL anhängt).

Ich hoffe, das hilft dir ein wenig weiter ...

Krösi

 

[Maik20]

Danke.

Ich habe das wie folgt umgesetzt. Leider bekomme ich beim Click auf den Link in Netscape die folgende Fehlermeldung:

window.event has no properties
toggleMe(undefined, undefined)127.0.0.1 (line 171)
onclick(click clientX=0, clientY=0)127.0.0.1 (line 1)
[Break on this error] top=window.event.clientY + document.body.scrollTop+10;

<script type="text/javascript" language="JavaScript">
		<!--
		function toggleMe(item,tabname){
		  var e=document.getElementById(item);
		  if(!e)return true;
		  with (document.getElementById(item).style){
		  	if(visibility == 'hidden' || display=='none'){
				display='block';
				visibility = 'visible';
		  	} else {
				display='none';
				visibility= 'hidden';
		  	}
			position = 'absolute';
			backgroundColor = '#c9e5e0';
			top=window.event.clientY + document.body.scrollTop+10;
			left=window.event.clientX + document.body.scrollLeft-450;
			border = '3px solid #eaeaea';
		  }

		  var htmlCode = document.getElementsByName(tabname)[0].innerHTML;
		  alert(htmlCode);
		  
		  return true;
		}
		//-->
		</script>

Das ist mein Link:

<a href="#" onclick="return toggleMe('SForm','daten'); return false">

Hat jemand eine Idee wo das Problem liegt?

 

[Sven Mintel]

window.event kennen nur IE+Opera.

Übergebe den Event der Funktion ebenfalls als Parameter, das Schlüsselwort dafür heisst event ....dann kannst du auch in anderen Browsern darauf zugreifen.

Danach wirst du u.U. weitere Fehlermeldungen erhalten, bspw. betreffs clientX und document.body.scrollLeft...auch das sind Sprachbestandteile des IE, du wirst dort nicht umhinkommen, mit einer "Browserweiche" zu arbeiten.

Nähere Details dazu findest du unter http://de.selfhtml.org/javascript/objekte/event.htm

 

[Maik20]

Hallo Sven,

das verstehe ich nicht so ganz. Wie würde das dann aussehen?

So:

<script type="text/javascript" language="JavaScript">
		<!--
		function toggleMe(item,tabname,event){
		  var e=document.getElementById(item);
		  if(!e)return true;
		  with (document.getElementById(item).style){
		  	if(visibility == 'hidden' || display=='none'){
				display='block';
				visibility = 'visible';
		  	} else {
				display='none';
				visibility= 'hidden';
		  	}
			position = 'absolute';
			backgroundColor = '#c9e5e0';
			top=window.event.clientY + document.body.scrollTop+10;
			left=window.event.clientX + document.body.scrollLeft-450;
			border = '3px solid #eaeaea';
		  }

		  var htmlCode = document.getElementsByName(tabname)[0].innerHTML;
		  alert(htmlCode);
		  
		  return true;
		}
		//-->
		</script>

<a href="#" onclick="return toggleMe('SForm','daten',event); return false">

Aber wie setze ich dann das Event? Ich will ja eigentlich nur an die Position des Mausclicks.