SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    Sep 2004
    Location
    India
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How to make table cells appear / disappear

    Hello,

    I want to make table cells appear / disappear without loading the webpage again. I know its possible through javascript but i am not sure on how to go about it.

    For example:

    If i have few cells like:

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5

    So if user clicks Cell 1 then without re-loading the page....the cells whcih are under Cell 1 should appear (the cells under Cell 1 were pre-created but they were not appearing by default).

    Cell 1
    Cell 1.1
    Cell 1.2
    Cell 2
    Cell 3
    Cell 4
    Cell 5

    And if Cell 4 is clicked then the cells under Cell 1 should disappear again and cells under Cell 4 should start showng up.

    Please tell me how to do it ?

    Thanks.

  2. #2
    Take The Blue Pill neilmerton's Avatar
    Join Date
    Jul 2004
    Location
    Leicester, UK
    Posts
    871
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the following link provides a good example of what you'd like to achieve:

    http://www.netlobo.com/div_hiding.html

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you can use the TableDom and use DeleteRow and DeleteCell methods with the int of the row or cell.

    Gav


  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Walking the Dom

    .Hidden
    {
    display: none;
    }

    // Rows and Cells are Zero-indexed. (the first row is 0, the first column is 0);

    // Hide the cell
    var table = document.getElementById("TableID");
    table.rows[x].cells[y].className = "Hidden";

    // Show the cell
    var table = document.getElementById("TableID");
    table.rows[x].cells[y].className = "";

    Use the same logic to apply alternating row colors

    .alternatingRowStyle
    {
    background-color: #CCCCCC;
    }

    function stripeTable()
    {
    var table = document.getElementById("TableID");

    for (var i = 0; i < table.rows.length; i++)
    {
    var row = table.rows[i];
    if (i % 2 == 0) // row is even
    {
    row.className = "alternatingRowStyle";
    }
    else
    {
    row.className = "rowStyle";
    }
    }


Bookmarks

Posting Permissions

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