PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Tabellenzellentext durch JavaScript austauschen lassen?

SLind
07.05.2002, 20:27
Howdy,

ich sitze nun seit Tagen an der verwirklichung von folgendem:

wir haben eine tabellenzeile, in der ersten spalte sind drei links...die größe der links soll jeweils in der zweiten spalte angezeigt werden...wenn die maus auf keinen der links zeigt, dann soll die gesamtgröße angezeigt werden....

z.B.

---------------------------
| CD1, CD2 | 500 MB |
---------------------------

hier zeigt die maus auf CD1...der text der zweiten spalte wird beim mouseover auf 500 MB gesetzt...

---------------------------
| CD1, CD2 | 300 MB |
---------------------------

hier zeigt die maus auf CD2...der text der zweiten spalte wird beim mouseover auf 300 MB gesetzt...

---------------------------
| CD1, CD2 | 800 MB |
---------------------------

hier ist die maus auf keinem der Links (CD1 und CD2)...


problem ist es irgendwie das objekt zweite spalte anzusprechen...ich hatte ein textfeld draus gemacht und per css so verändert das es wie normale schrift aussieht...das ganze ist aber unkompatible zu allem ausser IE 6 ;o((


najo eine elegante Lösung mit JavaScript wär echt genial...

würde mich freuen wenn das jemand hinkriegt...

danke schonmal
bis denne
-SLind

Felix Kaiser
07.05.2002, 21:17
Hab hier ne feine DOM2.0 Lösung:

Du baust die Tabellen auf: (Tabelle nur schematisch)

<table width=&quot;400&quot; border=&quot;1&quot;>
<tr>
<td id=&quot;row1&quot; width=&quot;200&quot;>
<span onMouseOver=&quot;MOver(this)&quot; onMouseOut=&quot;MOut(this)&quot;>CD1</span>
<span onMouseOver=&quot;MOver(this)&quot; onMouseOut=&quot;MOut(this)&quot;>CD2</span>
</td>
<td id=&quot;row1x&quot; width=&quot;200&quot;>&nbsp;</td>
</tr>
<tr>
<td id=&quot;row2&quot; width=&quot;200&quot;>
<span onMouseOver=&quot;MOver(this)&quot; onMouseOut=&quot;MOut(this)&quot;>CD1</span>
<span onMouseOver=&quot;MOver(this)&quot; onMouseOut=&quot;MOut(this)&quot;>CD2</span>
</td>
<td id=&quot;row2x&quot; width=&quot;200&quot;>&nbsp;</td>
</tr>
...
</table>


Benutzt folgenden JS Code:

var cd1 = new Array(300,450);
var cd2 = new Array(550,620);

function MOver(Sender)
{
var cd = Sender.firstChild.nodeValue;
var row = Sender.parentNode.id;
cd = cd.substr(2,1);
row = row.substring(3,row.length);
if (cd == 1) document.getElementById(&quot;row&quot;+row+&quot;x&quot;).firstChild.nodeValue = cd1[row-1];
if (cd == 2) document.getElementById(&quot;row&quot;+row+&quot;x&quot;).firstChild.nodeValue = cd2[row-1];
}

function MOut(Sender)
{
var cd = Sender.firstChild.nodeValue;
var row = Sender.parentNode.id;
cd = cd.substr(2,1);
row = row.substring(3,row.length);
document.getElementById(&quot;row&quot;+row+&quot;x&quot;).firstChild.nodeValue = cd1[row-1]+cd2[row-1];
}


Hoffe verstehst das Prinzip :)
SLind
08.05.2002, 00:52
Wow, vielen vielen Dank Guru. Vieeeelen Dank vor allem für Deine schnell gebastelte Lösung!!!! Dank Deiner Lösung konnte ich schnell genau das finden was ich brauchte und es funktioniert einwandfrei! Echt super, wenn ich Dir mal helfen kann, meld Dich bei mir..

Achja, der Code den ich letztendlich benutzt habe...

<html>
<head>
<title>Test</title>
<script language=&quot;Javascript&quot;>
<!--
function MOver(size, element)
{
document.getElementById(element).firstChild.nodeValue = size;
}
-->
</script>
</head>
<body>
<table width=&quot;400&quot; border=&quot;1&quot;><tr>
<td><a href=&quot;#&quot; onMouseOver=&quot;MOver(&acute;150&acute;, &acute;row1&acute;)&quot; onMouseOut=&quot;MOver(&acute;350&acute;, &acute;row1&acute;)&quot;>CD 1</a>
<a href=&quot;#&quot; onMouseOver=&quot;MOver(&acute;200&acute;, &acute;row1&acute;)&quot; onMouseOut=&quot;MOver(&acute;350&acute;, &acute;row1&acute;)&quot;>CD 2</a></td>
<td id=&quot;row1&quot;>350</td>
</tr></table>
</body>
</html>
Little
08.05.2002, 08:36
Super, danke,
kann ich auch gebrauchen

Grüße
Little