JavaScript tabellenzelle höhe ändern

[striker159]

hi
ich habe hier eine tabelle mit 4 zellen pro zeile. in einer zelle ist sehr viel text mit vielen zeilenumbrüchen

nun möchte ich , dass bei einem klick auf die große zelle, die zellenhöhe dieser so verkleinert wird, dass nur noch die erste zeile des textes zu sehen ist.

zum verdeutlichen ein bild : klick

bei einem erneuten klick soll dann wieder der gesamte inhalt zu sehen sein.

wie stelle ich das am besten an?

 

[Kagee]

setze über Javascript die CSS-Attribute für die Höhe (also die Höhe einer Zeile) und das overflow:hidden

 

[Black_Panter]

Am besten du nimmst dazu JavaScript.
Schau dich mal auf www.jquery.com um. Da solltest du finden was du suchst.
Wenn du kein Framework verwenden willst würd ich dir empfehlen dich auf de.selfhtml.org im JavaScript-Bereich umzuschauen.

 

[striker159]

im topic steht ja, dass es um javascript geht

also ich habe es jetzt mit folgendem code probiert

      var blu = document.getElementsByTagName("tbody"); 
      blu = blu[blu.length-1];
      var trs = blu.getElementsByTagName("tr");
      for (var i = 1; i < trs.length-1;i++){
        var td = trs[i].getElementsByTagName("td")[2];
        var on = document.createAttribute("onclick");
        on.nodeValue = ' javascript:this.style.overflow = \'hidden\';this.style.height = \'100px\';';
        td.setAttributeNode(on);
      }

hat sicher leider nichts verändert beim klicken

in firebug sieht die zelle so aus:
vor dem klick:
<td valign="top" onclick=" javascript:this.style.overflow = 'hidden';this.style.height = '100px';">

nach dem klick:
<td valign="top" onclick=" javascript:this.style.overflow = 'hidden';this.style.height = '100px';" style="overflow: hidden; height: 100px;">

 

[Tumbleweed]

Ich glaube das Problem dabei ist, dass sich Tabellen an die Größe des Inhalts anpassen. Du wirst entweder eine Tabelle aus divs bauen müssen oder du füllst die Tabellenzellen mit divs (was aber irgendwie redundant ist).

Hab mich spaßeshalber eben mal an deinem Problem versucht und gegoogelt und bin eben zu dieser Ansicht gekommen. Jemand der mehr mit Web-Programmierung am Hut hat, kann dir vielleicht einen besseren Rat geben.

So funktioniert es zumindest:

    <div id="tableContainer">
        <div id="col1">
            Kurzes bla bla
        </div>
        <div id="col2">
            Kurzes bla bla
        </div>
        <div id="col3">
            Langes bla blablabla blabla bla blablabla blabla bla  blablabla blabla bla blablabla blabla bla blablabla blabla bla blablabla  blabla
        </div>
        <div id="col4">
            Kurzes bla bla
        </div>
    </div>

#tableContainer
{
    font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
    width: 485px;
    height: 26px;
    overflow: hidden;
    padding: 0px;
    margin: 0px 0px;
    cursor: pointer;
}

#col1
{
    width: 120px;
    height: 24px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    float: left;
}

#col2
{
    width: 120px;
    height: 24px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    float: left;
}

#col3
{
    width: 120px;
    height: 24px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    float: left;
}

#col4
{
    width: 120px;
    height: 24px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    float: left;
}

    <script type="text/javascript">
        
        $(document).ready(function()
        {
            $("#tableContainer").click(toggleTableContainer);
        });
        
        function toggleTableContainer()
        {
            if ($("#tableContainer").css("height") == "26px")
                $("#tableContainer").css("height", "152px").children().css("height", "150px");
            else
                $("#tableContainer").css("height", "26px").children().css("height", "24px");
        }        
    </script>

Unter Einbindung von jQuery wohlgemerkt. Das redundante CSS bitte ich zu ignorieren, alles nur fix zusammengehackt.

 

[Black_Panter]

<script type="text/javascript" src ="http://code.jquery.com/jquery-1.6.2.min.js"></script>

Das wäre noch einzubinden für jQuery
Alternativ von jQuery.com runterladen und relativ einbinden.

 

[striker159]

danke für deinen vorschlag. da es ein greasemonkeyscript wird, habe ich eine simple lösung mit den von dir vorgeschlagenen divs gebastelt . einfach den langen text in ein div gepackt und mit einem onclick versehen

      var trs = blu.getElementsByTagName("tr");
      for (var i = 1; i < trs.length-1;i++){
        var td = trs[i].getElementsByTagName("td")[2];
        var on = document.createAttribute("onclick");
        on.nodeValue = ' javascript:this.style.overflow = \'hidden\';if (this.style.height != \'20px\'){this.style.height = \'20px\';}else{this.style.height = \'auto\';}';    
        td.innerHTML = '<div>'+td.innerHTML+'</div>';
        td.firstChild.setAttributeNode(on);
      }