html - Tabelleninhalt dynamisch über mouseover ändern

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html_tabelleninhalt_dynamisch_ueber_mouseover_aend_116446/page_1 - zur Vollversion wechseln!

grassi3000 schrieb am 05.06.2004 um 16:47

Hi, gibts eine Möglichkeit, den html text, der in ner tabellenzelle steht, über eine mouseover funktion zu ändern?

ich kann mit js zwar auf css eigenschaften zugreifen, und diese ändern, aber kann ich auch den text in ner tabelle damit ändern?

mfg
grassi

X3ll schrieb am 05.06.2004 um 16:49

Hm gibts da nicht so eine Funktion beim DHTML ?

that schrieb am 05.06.2004 um 17:03

Zitat von grassi3000
Hi, gibts eine Möglichkeit, den html text, der in ner tabellenzelle steht, über eine mouseover funktion zu ändern?

Ja.

grassi3000 schrieb am 05.06.2004 um 17:19

Zitat von that
Ja.

ich gebe zu, die frage so gestellt zu haben, dass diese antwort auch ausreicht, aber dennoch würde ich mich über hinweise, bzw. exakte angaben über diese funktion freuen

that schrieb am 05.06.2004 um 17:31

Zwar nicht Standard, aber von IE und Mozilla unterstützt:

cell = document.getElementById(...); // oder wie auch immer du an die Zelle herankommst
cell.innerHTML = "irgendwas";

ansonsten (DOM-konform, unter der Annahme dass nur ein Text in der Zelle steht):
newnode = document.createTextNode("muh");
if (cell.hasChildNodes())
cell.removeChild(cell.firstChild);
cell.appendChildNode(newnode);

Weitere Infos:
http://www.w3.org/TR/REC-DOM-Level-1/

that schrieb am 05.06.2004 um 17:34

Noch was Schönes dazu:

http://www.developer-x.com/content/innerhtml/

grassi3000 schrieb am 05.06.2004 um 17:43

thx, werd mich mal da umsehen

tomstig schrieb am 07.06.2004 um 22:23

HOPPS...HAB WAS FALSCHES GEPROGGT

warum so kompliziert??

es geht ja ganz einfach

Code: PHP

<table border="1" bordercolor="black">
 <tr style="background-color: #7499fc">
  <td width="200px" onmouseover="this.style.backgroundColor='#AAAABB'" onmouseout="this.style.backgroundColor='#7499fc'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#AAAABB'" onmouseout="this.style.backgroundColor='#7499fc'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#AAAABB'" onmouseout="this.style.backgroundColor='#7499fc'">
   blabla
  </td>
 </tr>

 <tr style="background-color: #BBCCff">
  <td width="200px" onmouseover="this.style.backgroundColor='#CCDDFF'" onmouseout="this.style.backgroundColor='#BBCCff'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#CCDDFF'" onmouseout="this.style.backgroundColor='#BBCCff'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#CCDDFF'" onmouseout="this.style.backgroundColor='#BBCCff'">
   blabla
  </td>
 </tr>
</table>
<br />
<br />
<br />
<table border="1" bordercolor="black">
 <tr style="background-color: #7499fc" onmouseover="this.style.backgroundColor='#00ff12'" onmouseout="this.style.backgroundColor='#7499fc'">
  <td width="200px">
   blabla
  </td>
  <td width="200px">
   blabla
  </td>

  <td width="200px">
   blabla
  </td>
 </tr>

 <tr style="background-color: #BBCCff" onmouseover="this.style.backgroundColor='#00ff12'" onmouseout="this.style.backgroundColor='#BBCCff'">
  <td width="200px">
   blabla
  </td>
  <td width="200px">
   blabla
  </td>
  <td width="200px">
   blabla
  </td>
 </tr>
</table>

tomstig schrieb am 07.06.2004 um 22:29

grassi, das sollte jetzt stimmen:

Code: PHP

<table>
 <tr>
  <td onmouseover="this.innerText = 'owned!' ">
   overclockers.at
  </td>
 </tr>
</table>

Rektal schrieb am 07.06.2004 um 23:46

Zitat

warum so kompliziert??

es geht ja ganz einfach

Code: PHP

<table border="1" bordercolor="black">
 <tr style="background-color: #7499fc">
  <td width="200px" onmouseover="this.style.backgroundColor='#AAAABB'" onmouseout="this.style.backgroundColor='#7499fc'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#AAAABB'" onmouseout="this.style.backgroundColor='#7499fc'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#AAAABB'" onmouseout="this.style.backgroundColor='#7499fc'">
   blabla
  </td>
 </tr>

 <tr style="background-color: #BBCCff">
  <td width="200px" onmouseover="this.style.backgroundColor='#CCDDFF'" onmouseout="this.style.backgroundColor='#BBCCff'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#CCDDFF'" onmouseout="this.style.backgroundColor='#BBCCff'">
   blabla
  </td>
  <td width="200px" onmouseover="this.style.backgroundColor='#CCDDFF'" onmouseout="this.style.backgroundColor='#BBCCff'">
   blabla
  </td>
 </tr>
</table>

Zwei improvemenste:
a) Gecko-Browser koennen tr:hover
b) Mit IE und CSS behaviors kannst auch sowas machen: tr { behavior: url(hover.htc); und da schreibst dann rein:

Code:

<public:attach event="onmouseover" onevent="hoverIn()" />
<public:attach event="onmouseout"  onevent="hoverOut()" />
<script language="jscript">
	function hoverIn() {
		this._realColor = this.currentStyle.backgroundColor;
		this.runtimeStyle.backgroundColor = '#FEDB99';
	}
	function hoverOut() {
		if (this._realColor) {
			this.runtimeStyle.backgroundColor = this._realColor;
		}
	}
</script>

Vorteil: du musst deinen Mark-Up nicht mit unnoetigem Code cluttern, Browser cachen CSS und HTC files.

Ich weiss, hat nix mit OF zu tun