SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically Expanding Tables

    Hi,

    Is there any way to add rows to a table using client side scripts and the DOM/

    I tried using insertAdjacentHTML("BeforeEnd", "<tr>...</tr>") but had no joy with this.

    Is there a way or is this one of those unsupported things?

    Cheers,

    Dale

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe this is 100% DOM-compliant code, but I don't think IE cares for it much...
    ----Adopt-a-Sig----
    Your message here!

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure! There are several ways to do it, and the differences will mostly come from how you want to populate the cells and how you want to invoke the additon, but here's a snapshot at 1 method.
    Code:
    <script language="javascript" type="text/javascript">
    
    var addFields = ['fname','lname','age'];
    function addRow(f, tID) {
    	var td, txt, t = document.getElementById(tID);
    	var tr = document.createElement("TR");
    	for (var i=0; i<addFields.length; i++) {
    		td = document.createElement("TD");
    		txt = document.createTextNode(f.elements[addFields[i]].value);
    		td.appendChild(txt);
    		tr.appendChild(td);
    		t.appendChild(tr);
    		}
    	}
    
    </script>
    
    <body>
    <table id="userData" border="1">
    <tr>
    <th>First Name</th><th>Last Name</th><th>Age</th>
    </tr>
    </table>
    <form>
    First Name: <input type="text" name="fname" id="fname" ><br>
    Last Name: <input type="text" name="lanem" id="lname" ><br>
    Age: <input type="text" name="age" id="age" size="3" ><br>
    <input type="button" value="Add Row" onClick="addRow(this.form, 'userData');">
    </body>
    Like I said before, this can vary quite a bit depending on how you want the addition accomplished. There's also a table object model that you can learn more about here and here but I couldn't get it to work correctly with Gecko.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank!

    Most helpful.

  5. #5
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    Just as a note here (I think beetle did a great job of explaining everything BTW), but one cavaet I can think of is when you sometimes use those pre-built table functions they use <tbody> tags and most of us don't use them. So, when you add a new row, remember to add it to the tbody element, not the table element.

    Of course, this depends on your situation

    aDog

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, and as a futher note, if you are going to incorporate the <thead> and <tfoot> objects too, the proper structure is like this

    <table>
    <thead></thead>
    <tfoot></tfoot>
    <tbody></tbody>
    </table>

    This allows the browser to render the header and footer first, then render the body.

    This is one of the few cases that I can think of where the HTML renderer circumvents source order.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •