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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post

    dynamic table generation style problems

    Below is some code that I have gotten to work. Basically, I want to be able to create a table dynamically. However, I can't seem to modify things with css class, in-line css, etc. I want to be able to modify it such that the first column will have a larger width than column two, have bold font, and be right aligned. The second column should be left aligned and smaller in width. I can get the tbl.id to work, but i can't use a class there. I assign any id tags to the lower level objects. I am testing in both firefox and ie. Is there something I need to know about javascript in these two browsers that would make styling this so hard?


    var body = document.getElementById("body");
    var remove;
    if (remove = document.getElementById("data"))
    {
    body.removeChild(remove); //problem with remove
    }
    if (remove = document.getElementById("climate"))
    {
    body.removeChild(remove);
    }
    if (remove = document.getElementById("wind"))
    {
    body.removeChild(remove);
    }
    var tbl = document.createElement("table");
    tbl.id = "data";
    var tblBody = document.createElement("tbody");
    for (i = 0; i < data[0].length; i++)
    {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    var cellTxt = document.createTextNode(labels[0][i] + ":");
    cell.appendChild(cellTxt);
    row.appendChild(cell);
    cell = document.createElement("td");
    cellTxt = document.createTextNode(data[0][i]);
    cell.appendChild(cellTxt);
    row.appendChild(cell);
    tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl);
    return;

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Try doing this:
    in the TD put an id for all tds having the same value: id="largeTD"

    in your css file add a new rule:
    .td#largeTD
    {
    width=200px;
    }


  •  

    Posting Permissions

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