www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problems adding dynamic content

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    2

    Problems adding dynamic content

    Hi all,

    I am new to JavaScript in the grand scheme of things. I have been dabbling for about 1 month now. Mainly looking at other peoples code and trying to figure out how it works. I now find myself in need of creating a specific code. I want to create a table that contains the following elements:

    a text box (input)
    3 select inputs (all 3 using different values)
    and a check box.

    I want the initial table to be set up with a button under it that allows me to add new lines with the above pre-defined content. I started out small and got it working with text in 1 cell and a select in the other. When I tried to add a text box (input) in the first cell it all went a bit wrong.

    Here is my code so far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <SCRIPT LANGUAGE="JavaScript">  
      
      function addRow(id){  
        var tbody = document.getElementById(id)  
      
        var row = document.createElement("TR")   
        var td1 = document.createElement("TD")  
      
        //td1.appendChild(document.createTextNode("row 2_column 1"))  
    	var textbox = document.createElement("input")
        textBox.type = "text"
    	textBox.size = "50"
      
        //td1.appendChild (textBox)
          
        var td2 = document.createElement("TD")  
      
        //Creating a Select Box    
        var selectBox = document.createElement("Select")  
        selectBox.name="mySelectBox" 
    	
    	selectBox.options[selectBox.options.length]=new Option("Banana","1")
    	selectBox.options[selectBox.options.length]=new Option("Melon","2")
    	selectBox.options[selectBox.options.length]=new Option("Orange","3")
          
        td1.appendChild (textBox)
    	td2.appendChild (selectBox)  
        row.appendChild(td1)  
        row.appendChild(td2)  
      
        tbody.appendChild(row)  
      
      
      }  
      
    </script>  
    </head>
    
    <body>
    <a href="javascript:addRow('myTable')">Add row</a>  
      
    <table id="myTable" cellspacing="0" border="1">  
      
        <tr>  
          <td>row1_column1</td><td>row1_column1</td>  
        </tr>  
      
      
    </table>  
    </body>
    </html>
    Please can anyone point out what I have done wrong, as I said I am new to all this so am still learning.

    Thanks

  2. #2
    Join Date
    Apr 2013
    Posts
    2
    Something just clicked and I have got it working with an input and select. Sorry if I wasted anyone's time. Working code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <SCRIPT LANGUAGE="JavaScript">  
      
      function addRow(id){  
        var tbody = document.getElementById(id)  
      
        var row = document.createElement("TR")   
        var td1 = document.createElement("TD")  
      
        //td1.appendChild(document.createTextNode("row 2_column 1"))
    	//Creating the Text Box
    	var inputBox = document.createElement("input")
        inputBox.type = "text"
    	inputBox.size = "50"
      
        td1.appendChild (inputBox)
          
        var td2 = document.createElement("TD")  
      
        //Creating a Select Box    
        var selectBox = document.createElement("Select")  
        selectBox.name="mySelectBox" 
    	
    	selectBox.options[selectBox.options.length]=new Option("Banana","1")
    	selectBox.options[selectBox.options.length]=new Option("Melon","2")
    	selectBox.options[selectBox.options.length]=new Option("Orange","3")
          
    	td2.appendChild (selectBox)  
        row.appendChild(td1)  
        row.appendChild(td2)  
      
        tbody.appendChild(row)  
      
      
      }  
      
    </script>  
    </head>
    
    <body>
    <a href="javascript:addRow('myTable')">Add row</a>  
      
    <table id="myTable" cellspacing="0" border="1">  
      
        <tr>  
          <td>row1_column1</td><td>row1_column1</td>  
        </tr>  
      
      
    </table>  
    </body>
    </html>
    Now to try and add the other 2 selects and the check box. I may be back if I get stuck :P

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    1. they say that it's a good habit to end up script lines with semicolons
    2. if you try to investigate what your 'tbody' really is you'll be surprised:

    Code:
    function addRow(id){  
        var tbody = document.getElementById(id)  
      alert(tbody.tagName);
        var row = document.createElement("TR")   
        var td1 = document.createElement("TD")

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles