nicht angemeldet
tabelle/zelle veränderte breite auslesen
hallo,
gibt es eigentlich irgendeine möglichkeit, die breite eines tabelle, tabellenspalte in pixeln auszulesen ? Ohne dass in dieser tabelle/zelle unbedingt eine width angabe steht.
Ich würde gerne herausfinden, wie breit eine tabellenzelle aktuell ist, wenn irgendein text sie auseinanderdrückt.
da gibts keine möglichkeit oder?
-
hallo,
gibt es eigentlich irgendeine möglichkeit, die breite eines tabelle, tabellenspalte in pixeln auszulesen ?
Joop:
breit = document.getElementById('zelle22').offsetLeft -document.getElementById('zelle21').offsetLeft;
Habe mal eine Studie programmiert, in der eine Grafik innerhalb einer Zelle bewegt wird.
LG Kalle
-
wie sieht es da mit browserkompatibilität aus?
und
kann man sich darauf verlassen, dass die angaben korrekt sind?auf jeden fall schonmal danke!!
-
wie sieht es da mit browserkompatibilität aus?
Klappt gut in NS 7.0. Das Positionieren der Grafik haut aber nicht hin im IE 5.
Ich poste dir mal den Source, kannst ihn gerne verwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style type="text/css"> <!-- body { font-size:0.9em; font-family:arial, sans-serif } p { padding:0 } td { text-align:center; vertical-align:middle; } //--> </style>
<script language="JavaScript" type="text/javascript"> <!-- // BILD AM URSPRUNGSORT UNSICHTBAR MACHEN // document.write( "<style type='text/css'>img.versteckt { visibility:hidden }</style>" ); var pingu_ri = 'S'; // Richtung S - O - N - W var pingu_x, pingu_maxx, pingu_minx; // aktuelle, maximale, minimale Pixel var pingu_y, pingu_maxy, pingu_miny;
var pingu_w = 10; // 100 waagerechte Schritte pro sec var pingu_s = 20; // 50 senkrechte Schritte pro sec var pingu_wp = 4; // waagerechte Pixel pro Schritt var pingu_sp = 4; // senkrechte Pixel pro Schritt
function setTable(proz) { document.getElementById('table').style.width = proz +"%"; pingu_x = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft; pingu_minx = pingu_x; pingu_maxx = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft + document.getElementById('zelle22').offsetWidth -47; pingu_y = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop; pingu_miny = pingu_y; pingu_maxy = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop + document.getElementById('zelle22').offsetHeight -55;
} function StartPingu() { window.document.images['pingu'].style.marginLeft = pingu_x; window.document.images['pingu'].style.marginTop = pingu_y; aktiv = window.setInterval('MovePingu()',pingu_s); } function MovePingu() { window.document.getElementsByName('x')[0].value = pingu_minx +' / '+pingu_x +' / '+pingu_maxx; window.document.getElementsByName('y')[0].value = pingu_miny +' / '+pingu_y +' / '+pingu_maxy; if ( pingu_ri == 'O' ) { pingu_x = pingu_x +pingu_wp; if ( pingu_x < pingu_maxx ) window.document.images['pingu'].style.marginLeft = pingu_x; else { window.clearInterval(aktiv); // Stop pingu_ri = 'N'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_s); // neue Geschwindigkeit } } if ( pingu_ri == 'W' ) { pingu_x = pingu_x -pingu_wp; if ( pingu_x > pingu_minx ) window.document.images['pingu'].style.marginLeft = pingu_x; else { window.clearInterval(aktiv); // Stop pingu_ri = 'S'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_s); // neue Geschwindigkeit } } if ( pingu_ri == 'S' ) { pingu_y = pingu_y +pingu_sp; if ( pingu_y < pingu_maxy ) window.document.images['pingu'].style.marginTop = pingu_y; else { window.clearInterval(aktiv); // Stop pingu_ri = 'O'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_w); // neue Geschwindigkeit } } if ( pingu_ri == 'N' ) { pingu_y = pingu_y -pingu_sp; if ( pingu_y > pingu_miny ) window.document.images['pingu'].style.marginTop = pingu_y; else { window.clearInterval(aktiv); // Stop pingu_ri = 'W'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_w); // neue Geschwindigkeit } } } //--> </script>
</head>
<body onLoad="javascript:StartPingu()">
<p id='info' style='background-color:#faa'>X-Wert: <input type='text' name='x' value='' style='border:none;width:8em'> Y-Wert: <input type='text' name='y' value='' style='border:none;width:8em'> <a href='javascript:window.clearInterval(aktiv)'>Stop</a> <a href='javascript:StartPingu()'>Weiter</a> Tabelle = <a href='javascript:setTable( 50)'>50%</a> <a href='javascript:setTable( 80)'>80%</a> <a href='javascript:setTable(100)'>100%</a> <a href='javascript:setTable(120)'>120%</a></p>
<script> var breit = document.getElementById('info').offsetWidth; document.write( "<img src='../img/rot.gif' style='width:"+breit+"px; height:2px'>"); document.write( "<p>Dieser rote Absatz ist "+breit+" Pixel breit</p>"); </script> <br>
<table id='table' width=80%> <tr> <td id='zelle11' width=40% style='border:1px solid #00a'>11</td> <td id='zelle12' width=50% style='border:1px solid #080'>12</td> <td id='zelle13' width=10% style='border:1px solid #000'>13</td> </tr> <tr style='height:250px'> <td id='zelle21' width=40% style='border:1px solid #808'>21</td> <td id='zelle22' width=50% style='border:1px solid #f00;background-color:#fee'>22 <img src='../img/logo_linux.gif' name='pingu2' style='position:absolute;left:0;top:100; width:47px;height:55px'><!-- 95x110 --> </td> <td id='zelle23' width=10% style='border:1px solid #888'>23</td> </tr> <tr> <td id='zelle31' width=40% style='border:1px solid #aa0'>31</td> <td id='zelle32' width=50% style='border:1px solid #088'>32</td> <td id='zelle33' width=10% style='border:1px solid #ccc'>33</td> </tr> </table> <script> var breit = document.getElementById('table').offsetWidth; document.write( "<img src='../img/rot.gif' style='width:"+breit+"px; height:2px'>"); document.write( "<p>Diese Tabelle ist "+breit+" Pixel breit</p>"); </script>
<img src='../img/logo_linux.gif' name='pingu' style='position:absolute;left:0;top:0; width:47px;height:55px'><!-- 95x110 -->
<table border=1> <tr><td> </td><td>Ecke x</td><td>Ecke y</td><td>Breit</td><td>Hoch</td></tr>
<script> document.write( "<tr><td>Tabelle </td><td>"+document.getElementById('table').offsetLeft +"</td><td>"+document.getElementById('table').offsetTop +"</td><td>"+document.getElementById('table').offsetWidth +"</td><td>"+document.getElementById('table').offsetHeight +"</td></tr>"); document.write( "<tr><td>Zelle 11 </td><td>"+document.getElementById('zelle11').offsetLeft +"</td><td>"+document.getElementById('zelle11').offsetTop +"</td><td>"+document.getElementById('zelle11').offsetWidth +"</td><td>"+document.getElementById('zelle11').offsetHeight+"</td></tr>"); document.write( "<tr><td>Zelle 22 </td><td>"+document.getElementById('zelle22').offsetLeft +"</td><td>"+document.getElementById('zelle22').offsetTop +"</td><td>"+document.getElementById('zelle22').offsetWidth +"</td><td>"+document.getElementById('zelle22').offsetHeight+"</td></tr>");
pingu_x = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft; pingu_minx = pingu_x; pingu_maxx = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft + document.getElementById('zelle22').offsetWidth -47; pingu_y = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop; pingu_miny = pingu_y; pingu_maxy = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop + document.getElementById('zelle22').offsetHeight -55; </script> </table>
<table border=1><tr><td>Hallo</td><td> <div style="position:relative; width:300px; height:300px;border:1px solid #060">Hallo <img src='../img/logo_linux.gif' name='pingu' style='position:absolute; left:0; top:0; border:none; width:3em'> </div> </td></tr></table>
</body> </html>
-
hallo,
hehe. den sourcecode hättest du nicht ganz posten brauchen :).
ich brauch ja eigenlich nur die möglichkeit der abfrage wie breit eine zelle einer tabelle ist, wenn sie keine breitenangabe hat, und irgendein text diese zelle auseinanderzieht...ich werde damit mal rumspielen :)
-
weisst du wieso dass nicht geht auf ie6?:
<table cellpadding="0" cellspacing="0" border="1" id="t1">
<tr>
<td id="t1td1">tab 1</td>
<td id="t1td2">tab 1</td>
<td id="t1td3">tab 1</td>
</tr>
<table><script language="JavaScript" type="text/javascript">
<!--
t1td2 = document.getElementById('t1td2').offsetLeft;alert("t1td2: "+ t1td1);
//-->
</script>-
weisst du wieso dass nicht geht auf ie6?:
<script language="JavaScript" type="text/javascript">
<!--
t1td2 = document.getElementById('t1td2').offsetLeft;
alert("t1td2: "+ t1td1);
//-->
</script>Vielleicht, weil die Variable t1td1 nicht definiert ist?
-
-
-
-