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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Location
    Toronto, Canada
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    insert/delete columns from table?

    The intranet site I'm working on has no backend database, so when I want to dynamically display table-based data, I do everything in Javascript.

    Right now, I have all the data in Javascript arrays in the HTML files. E.g.:

    Code:
    NAME[1]="John";GENDER[1]="Male";CITY[1]="Denver";
    NAME[2]="Bill";GENDER[2]="Male";CITY[2]="Memphis";
    NAME[3]="Mary";GENDER[3]="Female";CITY[3]="Sacramento";
    NAME[4]="Jill";GENDER[4]="Female";CITY[4]="New York";
    Then I have forms to select different options, and then the user click "Submit" button and it will adds rows to a table for each match/result (using DOM functions like insertRow and insertCell). If the user clicks "Reset" button, it deletes all the rows from the table except the first one (header row);

    That whole system works fine (a little slow when there are a lot of rows/results to display, but that's normal).

    Now I have a data set where there are few rows, but a lot of columns. I don't want a side (left-right) scroll bar on the page, so I thought of turning the system 90 degrees, and add columns to the table for each result.

    However they are no insertColumn function.

    I've been trying to figure out a way to add/delete columns using DOM for 4 hours now and I can't think of anything...

    Help!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Think in HTML way... Use the cells index within the rows. If a simetric table, the first cell of the first row has the same index as the first cell in the second row and so on. Loop through a second array (rows/cells) and remove the cells which have, in their rows, the same index.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Example:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    style type="text/css">
    <!--
    td {
        
    background-color#CCCCCC;
    }
    -->
    </
    style>
    <
    script type="text/javascript">
    function 
    deleteC(c){
    var 
    root c.parentNode.parentNode;//tbody or table - correction if tbody is not present
    var allRows root.getElementsByTagName('tr');// rows collection in the table
    var aCells c.parentNode.getElementsByTagName('td')//cells collection in this row
        
    for(var j=0;j<aCells.length;j++){
            if(
    c==aCells[j]){var q=j;break}//gets the index of this cell in this row
        
    }
        for(var 
    i=0;i<allRows.length;i++){
            
    allRows[i].removeChild(allRows[i].getElementsByTagName('td')[q]);//removes the correspondent cells with the same index in their rows
        
    }
    }
    </script>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="2" cellpadding="2">
    <tbody>
    <tr>
    <td>c0 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
    <td>c1 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
    <td>c2 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
    <td>c3 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
    </tr>
    <tr>
    <td>c0</td>
    <td>c1</td>
    <td>c2</td>
    <td>c3</td>
    </tr>
    </tbody>
    </table>

    </body>
    </html> 
    I'll let you the pleasere to do the inverse operation, adding a column, using the same reasoning ... If you encounter problems, let me know
    Last edited by Kor; 05-13-2005 at 11:03 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    TNO
    TNO is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post
    Have you considered the TDC (Tabular Data Control) as an option?

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by TNO
    Have you considered the TDC (Tabular Data Control) as an option?
    Only if there is an equivalent for Mozilla... AFAIK TDC is an IE only based on AvtiveX feature...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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