Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically setting the height of a table cell

    hi,

    I'm pulling data from a database and want to alter the height of the td class "space", depending on the amount of rows.

    here's what i've got so far:

    Code:
    <?php
    $connection = mysql_connect("db12345.db.1and1.com","dbo12345","12345");
    mysql_select_db("db12345");
    if (!$connection) {
      die("Error: " . mysql_error());
      } else {
    	}
    echo "<table id=\"mytable\">";
    
           $myresult = mysql_query("SELECT * FROM thetable");
    while($row = mysql_fetch_object($myresult))
             {
    echo "<tr>
    <td><p class=\"i\">".nl2br($row->field1)."</p></td>
    <td><p class=\"i\">".nl2br($row->field2)."</p></td>
    <td><p class=\"i\">".nl2br($row->field3)."</p></td>
    <td class=\"space\">This cell should have variable height depending on overall height of table</td></tr></table>";
    }
    mysql_close("db12345","dbo12345","12345");
    ?>
    
    
    <button name="set_height" id="set_height">Set height</button>
    
    
    <script type="text/javascript">
    $('#set_height').click(function() {
        var theheight = $("#mytable").height();
    alert(theheight);
        if (theheight < 1000) {     
            document.getElementsByClassName("space").style.height = 100 + 'px';
        }
    });
    </script>
    Everything works fine, but the cells don't resize. There's some reaction when i assign an id to the td and use document.getElementById("space"), meaning that the first row resizes - at least something.

    It's probably necessary to loop through the rows, so I tried

    Code:
    var thelist = document.getElementsByClassName("space");
            for (var i = 0; i < thelist.length; i++) {
                var elements = thelist[i]; 
    	elements.height = 100 + 'px';         
            }
    but that doesn't work.

    Can anyone spot a simple syntax mistake, or - being a complete js newb - have i approached things 100% wrong?

    Thanks for any hints...
    Last edited by legnoart; 11-27-2012 at 08:05 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Not to ask a silly question, but...

    Have you considered simply using CSS an *percentages* to set your heights?

    Code:
    <style type="text/css">
    #mytable { height: 90%; }
    #mytable .space { height: 27%; }
    </style>
    Or whatever percentages make sense?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for replying. Normally this straightforward solution would work perfectly. However I should have explained more in detail what I'm trying to do:

    Certain people can enter data in a list, which should eventually be printed out on paper. What I'm after is some sort of auto-layout function. If there are only a few rows, data will fit on one page with fairly big spaces between the rows. The cell height will decrease with an increasing number of rows. Your suggested solution would work until here.

    But: if a defined table height is exceeded and things get too crowded, the data should spread out on 2 pages from top to bottom etc.

    The calculation isn't a problem, it's just that I can't get the "space" class / (id ?) to resize.

    Thanks for further ideas...
    Last edited by legnoart; 11-28-2012 at 07:22 AM.

  • #4
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Without height the cells will take the required place in the table...
    You have also the option to change the cells padding and the font line-heigth and to play with a media="print" style.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I know about @media print etc., still this won't solve this problem:

    if a defined table height is exceeded and things get too crowded, the data should spread out on 2 pages from top to bottom etc.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Yes, you will need to loop through the elements as getElementsByClassName returns a collection.

    getElementsByClassName works in modern browsers - are you using an older browser..

    You are using jQuery (or other framework) as I recognise from

    Code:
    $('#set_height').click(function() {
    Have you attached this library as a script?

    If you are using jQuery then it makes sense to use it to set the height, and to refer to the elements by their classname.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks...

    Have you attached this library as a script?
    well, at least i think i have. i've added

    <script type="text/javascript" src="jquery.js"></script>

    before the rest of the scripts, jquery.js sitting in the same folder.

    If you are using jQuery then it makes sense to use it to set the height, and to refer to the elements by their classname.
    Back to the drawing board. This shows me that I have no clue about javascripting at all - I just grabbed some snippets from various forum posts and threw them together without actually really knowing what I'm doing. :-)
    Last edited by legnoart; 11-28-2012 at 09:28 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •