SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Rio's Avatar
    Join Date
    Nov 2001
    Location
    United Kingdom
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add table row script problem

    Hi there!

    I have a script like the one below to add rows dynamically into a table

    When I try it out, it adds new rows but the form element (in this case text field) is returned as code instead of well-formed textbox. I am still a novice in JavaScript here and can't work out how to make this script return the form element as it should. Can someone help me please?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function addRow(id){
      
    	var col1 = "<input type=\"text\" name=\"email\" size=\"30\" maxlength=\"255\">";
    	var col2 = "<input type=\"text\" name=\"name\" size=\"30\" maxlength=\"255\">"; 
      
        var tbody = document.getElementById
    (id).getElementsByTagName("TBODY")[0];
        var row = document.createElement("TR")
        var td1 = document.createElement("TD")
        td1.appendChild(document.createTextNode(col1))
        var td2 = document.createElement("TD")
        td2.appendChild (document.createTextNode(col2))
        row.appendChild(td1);
        row.appendChild(td2);
        tbody.appendChild(row);
      }
    //  End -->
    </script>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <a href="javascript:addRow('myTable')">Add row</a>
    
    <table id="myTable" cellspacing="0" border="1">
      <tbody>
        <tr>
          <td>row1_column1</td><td>row1_column1</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    is this what you want?
    Code:
     var col1 = "<input type='text' name='email' size='30' maxlength='255'>";
     var col2 = "<input type='text' name='name' size='30' maxlength='255'>"; 
    ...
    td1.appendChild(document.createElement(col1))
    ....
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Zealot Rio's Avatar
    Join Date
    Nov 2001
    Location
    United Kingdom
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Vinny,

    I've just tryed your input but it doesn't seem to work. I just get blank cell which expands to the right every time new row is added

    Rio

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    it still works for me -- a text box in the second row, first col -- see note in code below

    Code:
    function addRow(id){
      
     var col1 = "<input type='text' name='email' size='30' maxlength='255'>";
     var col2 = "<input type='text' name='name' size='30' maxlength='255'>"; 
      
    	var tbody = document.getElementById
    (id).getElementsByTagName("TBODY" )[0];
    	var row = document.createElement("TR" )
    	var td1 = document.createElement("TD" )
    	td1.appendChild(document.createElement(col1))
    	var td2 = document.createElement("TD" )
     
    // I left this so you could see what createTextNode does
    	td2.appendChild (document.createTextNode('col2'))
    
    	row.appendChild(td1);
    	row.appendChild(td2);
    	tbody.appendChild(row);
      }
    //  End -->
    </script>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <a href="javascript:addRow('myTable')">Add row</a>
    <table id="myTable" cellspacing="0" border="1">
      <tbody>
    	<tr>
    	  <td>row1_column1</td><td>row1_column1</td>
    	</tr>
      </tbody>
    </table>
    </body>
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Zealot Rio's Avatar
    Join Date
    Nov 2001
    Location
    United Kingdom
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... I pasted in your code, and I even re-typed it in and still the same. Would it be because I use IE 5.2 on Mac?

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rio,

    Would it be because I use IE 5.2 on Mac
    Quite possibly. But, I don't know The only thing I can recommend, if no one else here comes to your aid, is post your question at the webXpertz forums (link in my sig). I'm pretty certain there are people there with Macs.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


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
  •