html - Tabelleninhalt dynamisch über mouseover ändern - Forum

grassi3000

radeon gefrierer

Registered: Apr 2003
Location: AT/NÖ/Traisen
Posts: 1161

05.06.2004 - 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

╰(*°▽°*)╯

Registered: Mar 2002
Location: /dev/null
Posts: 1243

05.06.2004 - 16:49

Hm gibts da nicht so eine Funktion beim DHTML ?

that

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

05.06.2004 - 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

radeon gefrierer

Registered: Apr 2003
Location: AT/NÖ/Traisen
Posts: 1161

05.06.2004 - 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

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

05.06.2004 - 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

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

05.06.2004 - 17:34

Noch was Schönes dazu:

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

grassi3000

radeon gefrierer

Registered: Apr 2003
Location: AT/NÖ/Traisen
Posts: 1161

05.06.2004 - 17:43

thx, werd mich mal da umsehen

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

07.06.2004 - 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>

Bearbeitet von tomstig am 07.06.2004, 22:27

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

07.06.2004 - 22:29

grassi, das sollte jetzt stimmen:

Code: PHP

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

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

07.06.2004 - 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

grassi3000 radeon gefrierer Registered: Apr 2003 Location: AT/NÖ/Traisen Posts: 1161	05.06.2004 - 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 ╰(°▽°)╯ Registered: Mar 2002 Location: /dev/null Posts: 1243	05.06.2004 - 16:49 Hm gibts da nicht so eine Funktion beim DHTML ?
that Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	05.06.2004 - 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 radeon gefrierer Registered: Apr 2003 Location: AT/NÖ/Traisen Posts: 1161	05.06.2004 - 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 Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	05.06.2004 - 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 Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	05.06.2004 - 17:34 Noch was Schönes dazu: http://www.developer-x.com/content/innerhtml/
grassi3000 radeon gefrierer Registered: Apr 2003 Location: AT/NÖ/Traisen Posts: 1161	05.06.2004 - 17:43 thx, werd mich mal da umsehen
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	07.06.2004 - 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> Bearbeitet von tomstig am 07.06.2004, 22:27
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	07.06.2004 - 22:29 grassi, das sollte jetzt stimmen: Code: PHP `<table> <tr> <td onmouseover="this.innerText = 'owned!' "> overclockers.at </td> </tr> </table>`
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	07.06.2004 - 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

html - Tabelleninhalt dynamisch über mouseover ändern

Forum Index > Software > Coding Stuff

grassi3000

X3ll

that

grassi3000

that

that

grassi3000

tomstig

tomstig

Rektal