nicht angemeldet
Tabellenspaltenbreite dynamisch ändern - mouseover/js-hover/css
Hallo,
ich möchte Tabellenspalten dynamisch verbreitern, wenn ich mit der Maus drüberfahre. Vorher verborgener Text soll dann erscheinen. Damit das ganze nicht flackert, soll die Zeilenhöhe (column height) konstant sein.
Versuche mit :hover/css habe ich aufgegeben, da der hover-Effekt nur für das "eigene" Element bzw. das "eigene" Eltern-Element ausgeführt wird, also z.B. für eine Zelle. Zellen kann man zwar gruppieren, aber eben nur über die Zeile (tr). Meinen Wunscheffekt könnte ich also für Zeilen/ 'Änderung der Höhe' ausführen. Aber eben nicht für Spalten/ 'Änderung der Breite'. Dafür fehlt ein Spalten-gruppierendes Element - col hilft hier nicht.
Meine eben gestellten Thesen dürfen gerne widerlegt werden, bis dahin fahre ich mit javasrcipt fort:
Mit JS ist es mir zwar gelungen, bin aber nicht zufrieden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> test</title>
<style type="text/css">
<!--
td{
width:30px;
border:1px solid black;
}
span{
height:20px;
display:block;
overflow:hidden;
}
-->
</style>
<script type="text/javascript">
function mouse_over(id){
var table = document.all ? document.all.aTable : document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[id].style.width = "100px";
}
function mouse_out(id){
var table = document.all ? document.all.aTable : document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[id].style.width = "30px";
}
</script>
</head>
<body>
<table id="aTable">
<colgroup>
<col class="foo" />
<col class="foo" />
<col class="foo" />
<col class="foo" />
</colgroup>
<tr>
<td><span onmouseover="mouse_over(0)" onmouseout="mouse_out(0)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(1)" onmouseout="mouse_out(1)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(2)" onmouseout="mouse_out(2)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(3)" onmouseout="mouse_out(3)">
12345 67890 12345 67890 12345 67890
</span></td>
</tr>
<tr>
<td><span onmouseover="mouse_over(0)" onmouseout="mouse_out(0)">
12345678901234567890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(1)" onmouseout="mouse_out(1)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(2)" onmouseout="mouse_out(2)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(3)" onmouseout="mouse_out(3)">
12345 67890 12345 67890 12345 67890
</span></td>
</tr>
</table>
</body>
</html>
Nicht zufrieden weil:
1. firefox hat mit overflow:hidden Probleme. Wenn eine Zeichenkette zu lang ist, bleibt die Spalte entsprechend breit - soll das so sein? Operas Anzeige scheint mir logischer: Der Text wird abgeschnitten - Er wird versteckt: 'hidden' eben!
2. der Code ist mir zu aufgeblasen - jede Tabellen-Zelle mit mouseover und -out. und dann noch eine js-Schleife, die jedes mal alle Tabellen-Zeilen durchläuft? Hat jemand eine einfachere Idee?
Danke und VG
KBS170
-
Stecke in die Tabellenspalten zusätzliche Elemente mit display:block, damit das overflow:hidden so funktioniert wie geplant.
Bei den Browsern, die :hover auch bei anderen als Linkelementen unterstützen (eine typische Schwachstelle bei älteren IE-Versionen) dürfte es auch allein mit CSS klappen.
Alternativ kannst Du auch die Klasse .hover per JavaScript vergeben. In diesem Fall solltest Du die Events aber mit einem Script verteilen und nicht ins HTML schreiben, bspw.
var tablecells = document.getElementById('aTable').getElementsByTagName('td');
var t = tablecells.length;
while (t--) {
tablecells[t].onmouseover = function() { this.className = 'hover'; }
tablecells[t].onmouseout = function() { this.className = ''; }
}Das ist natürlich noch sehr krude - ggf kannst Du statt der td-Elemente auch gleich die innenliegenden divs nehmen, da auf diese Weise Probleme mit fehlendem Bubbling vermieden werden können.
Gruß, LX
--
RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
RFC 1925, Satz 11a: Siehe Regel 6a-
Stecke in die Tabellenspalten zusätzliche Elemente mit display:block, damit das overflow:hidden so funktioniert wie geplant.
Meinst Du das so?
css:span{ color:green; display:block; overflow:hidden; }html:
<td><div><span><span> 123456789012345 67890 12345 67890 </span></span></div></td>leider auch ohne Erfolge beim firefox!
Bei den Browsern, die :hover auch bei anderen als Linkelementen unterstützen (eine typische Schwachstelle bei älteren IE-Versionen) dürfte es auch allein mit CSS klappen.
Aber firefox unterstützt doch :hover bei allen Elementen? :hover ist schließlich nicht das Problem, sondern die falsche Interpretation von overflow:hidden bei langen string-Ketten ohne Leerzeichen (nur firefox).
Alternativ kannst Du auch die Klasse .hover per JavaScript vergeben. In diesem Fall solltest Du die Events aber mit einem Script verteilen und nicht ins HTML schreiben, bspw.
var tablecells = document.getElementById('aTable').getElementsByTagName('td');
var t = tablecells.length;
while (t--) {
tablecells[t].onmouseover = function() { this.className = 'hover'; }
tablecells[t].onmouseout = function() { this.className = ''; }
}Das ist natürlich noch sehr krude - ggf kannst Du statt der td-Elemente auch gleich die innenliegenden divs nehmen, da auf diese Weise Probleme mit fehlendem Bubbling vermieden werden können.
mit td ging's wunderbar! Danke!
die fertige Version, wie ich es wohl einbauen werde:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> test</title> <style type="text/css"> <!-- td{ width:30px; border:1px solid black; } td div{ height:20px; overflow:hidden; } .hover{ width:100px; } --> </style> <script type="text/javascript"> function zelle_verbreitern() { var tablecells = document.getElementById('aTable').getElementsByTagName('td'); var t = tablecells.length; while (t--) { tablecells[t].onmouseover = function() { this.className = 'hover'; } tablecells[t].onmouseout = function() { this.className = ''; } } } </script> </head> <body> <table id="aTable" onmouseover="zelle_verbreitern()"> <colgroup> <col class="foo" /> <col class="foo" /> <col class="foo" /> <col class="foo" /> </colgroup> <tr> <td><div> 12345 67890 12345 67890 12345 67890 </div></td> <td><div><span><span> 123456789012345 67890 12345 67890 </span></span></div></td> <td><div> 12345 67890 12345 67890 12345 67890 </div></td> <td><div> 12345 67890 12345 67890 12345 67890 </div></td> </tr> <tr> <td><div> 12345 67890 12345 67890 12345 67890 </div></td> <td><div> 12345 67890 12345 67890 12345 67890 </div></td> <td><div> 12345 67890 123456789012345 67890 </div></td> <td><div> 12345 67890 12345 67890 12345 67890 </div></td> </tr> </table> </body> </html>
-