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
    Mar 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    dynamically create table of text inputs

    I'm dynamically creating a table. I want to be able to enter text into each cell like a spreadsheet

    the table is working when i append the following text into the cell:
    //var cellText = document.createTextNode("cell is row "+j+", column "+i);

    but when I try to append the input element - I get an error.
    var inputBox = document.createElement("input");
    cell.appendChild(input2);

    here is my code:


    Code:
    	// get the reference for the body
    	var body = document.getElementsByTagName("body")[0];
      
    	// creates a <table> element and a <tbody> element
    	var tbl     = document.createElement("table");
    	var tblBody = document.createElement("tbody");
      
    	//Create a new line for each staff member assigned to project
    	for (var j = 0; j < project.staffList.length; j++) 
    	{
    		//Create a new row for each week of the month
    		var row = document.createElement("tr");
      
    		for (var i = 0; i < weeksInMonth; i++) 
    		{
    			var cell = document.createElement("td");
    			//First row is staff member's name
    			if (i < 1)
    			{
    				var cellText = document.createTextNode(project.staffList[j].staffID);
    				cell.setAttribute("width", "10%");
    			}
    			else
    			{
    				//var cellText = document.createTextNode("cell is row "+j+", column "+i);
    				var inputBox = document.createElement("input");
    				inputBox.type = "text";
    			}
    			cell.appendChild(input2);
    			row.appendChild(cell);
    		}
    		// add the row to the end of the table body
    		tblBody.appendChild(row);
    	}
      
    	// put the <tbody> in the <table>
    	tbl.appendChild(tblBody);
    	// appends <table> into <body>
    	body.appendChild(tbl);
    	// sets the border attribute of tbl to 2;
    	tbl.setAttribute("border", "2");
    	tbl.setAttribute("width", "100%");
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    there is no input2 defined

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    function Test(){
    	// get the reference for the body
    	var body = document.getElementsByTagName("body")[0];
    
    	// creates a <table> element and a <tbody> element
    	var tbl     = document.createElement("table");
    	var tblBody = document.createElement("tbody");
    
    	//Create a new line for each staff member assigned to project
    	for (var j = 0; j < 4; j++)
    	{
    		//Create a new row for each week of the month
    		var row = document.createElement("tr");
    
    		for (var i = 0; i < 4; i++)
    		{
    			var cell = document.createElement("td");
    			//First row is staff member's name
    			if (i < 1){
    				var cellText = document.createTextNode('project.staffList[j].staffID');
    				cell.setAttribute("width", "10%");
    			cell.appendChild(cellText);
    			}
    			else {
    				//var cellText = document.createTextNode("cell is row "+j+", column "+i);
    				var inputBox = document.createElement("input");
    				inputBox.type = "text";
    			cell.appendChild(inputBox);
    			}
    			row.appendChild(cell);
    		}
    		// add the row to the end of the table body
    		tblBody.appendChild(row);
    	}
    
    	// put the <tbody> in the <table>
    	tbl.appendChild(tblBody);
    	// appends <table> into <body>
    	body.appendChild(tbl);
    	// sets the border attribute of tbl to 2;
    	tbl.setAttribute("border", "2");
    	tbl.setAttribute("width", "100%");
    }
    
    Test();
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the comment, I've fixed that - it was a mistake I made formatting for the post - it's giving me a weird error - see below:

    NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLTableCellElement.appendChild]
    [Break On This Error]

    Code:
    			{
    				//var cellText = document.createTextNode("cell is row "+j+", column "+i);
    				var inputBox = document.createElement("input");
    				//inputBox.type = "text";
    			}
    			cell.appendChild(inputBox);
    			row.appendChild(cell);
    		}
    		// add the row to the end of the table body
    		tblBody.appendChild(row);

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    You don't need to create all the tr and td tags directly. You can create every tag in a table except for the table and tbody tags by using the appropriate table DOM methods.

    Code:
    function Test(){
    	// get the reference for the body
    	var body = document.getElementsByTagName("body")[0];
    
    	// creates a <table> element and a <tbody> element
    	var tbl     = document.createElement("table");
    	var tblBody = document.createElement("tbody");
            // put the <tbody> in the <table>
            tbl.appendChild(tblBody);
    	//Create a new line for each staff member assigned to project
    	for (var j = 0; j < 4; j++)
    	{
                    row = tbl.insertRow(i);
    		for (var i = 0; i < 4; i++)
    		{
                            cell = row.insertCell(i);
    			//First column is staff member's name
    			if (i < 1){
    				var cellText = document.createTextNode('project.staffList[j].staffID');
    				cell.setAttribute("width", "10%");
    			call.appendChild(cellText);
    			}
    			else {
    				//var cellText = document.createTextNode("cell is row "+j+", column "+i);
    				var inputBox = document.createElement("input");
    				inputBox.type = "text";
    			call.appendChild(inputBox);
    			}
    		}
    
    	}
    
    	
    	
    	// appends <table> into <body>
    	body.appendChild(tbl);
    	// sets the border attribute of tbl to 2;
    	tbl.setAttribute("border", "2");
    	tbl.setAttribute("width", "100%");
    }
    
    Test();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    jonnoj (03-04-2013)

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    awesome - thanks so much for your help! for others' reference there were a few small things I needed to fix to get the code to run (lines 13,16,21):

    Code:
    function Test(){
    	// get the reference for the body
    	var body = document.getElementsByTagName("body")[0];
    
    	// creates a <table> element and a <tbody> element
    	var tbl     = document.createElement("table");
    	var tblBody = document.createElement("tbody");
            // put the <tbody> in the <table>
            tbl.appendChild(tblBody);
    	//Create a new line for each staff member assigned to project
    	for (var j = 0; j < 4; j++)
    	{
                    row = tbl.insertRow(j);
    		for (var i = 0; i < 4; i++)
    		{
                            cell = row.insertCell(i);
    			//First column is staff member's name
    			if (i < 1){
    				var cellText = document.createTextNode('project.staffList[j].staffID');
    				cell.setAttribute("width", "10%");
    			cell.appendChild(cellText);
    			}
    			else {
    				//var cellText = document.createTextNode("cell is row "+j+", column "+i);
    				var inputBox = document.createElement("input");
    				inputBox.type = "text";
    			cell.appendChild(inputBox);
    			}
    		}
    
    	}
    
    	
    	
    	// appends <table> into <body>
    	body.appendChild(tbl);
    	// sets the border attribute of tbl to 2;
    	tbl.setAttribute("border", "2");
    	tbl.setAttribute("width", "100%");
    }
    
    Test();
    Last edited by jonnoj; 03-04-2013 at 04:48 AM.


  •  

    Tags for this Thread

    Posting Permissions

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