JavaScript - Javascript:adding Datepicker To Dynamically Created Text Box

I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changed the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as
document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped yet again.

Anyone know how to deal with this issue?

JS:
Code:

 
$(function() {

	var i = $('input').size() + 1;

	$('a.add').click(function() {
							  
		$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
		

		i++;
	});
});

function checkl(name, value){
	var errors=new Array();
	var x; 
  	var msg = "There were some problems...\n";
	
	if (value==="") {
  	errors['blank'] = "Field must not be blank";
	}
  
  	for (x in errors)
 	 {
	  msg += "\n"+errors[x];
  	 }

 	 if (!(x==undefined)){ 
  	alert(msg); 
	document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
	document.getElementById(name).focus(); // does NOT work, no focus
	// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
	}else{
	document.getElementById(name).style.backgroundColor="";
	}
}

HTML:
Code:

<a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> 
<form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);">
<div id="inputs">
<!-- dynamically created inputs here -->
</div>

<!-- Password: <input type="password" id="password" name="password" size="10"> -->
<input type="submit" value="Send">

</form>

Hi all ,

i am creating a dynamic controls but one thing iam stack on is how to associate an existing class ("C1") to that dynamic control : i.e

var var1 = row.insertCell(0);
var1.align ="center";
var1.innerHTML - array1[A1[i]];


thoughts ?

thanks

Hi,

This is my first time here so I hope I'm not posting to the wrong forum. If this has been answered before, please direct me to the corrent post.

I've created several dynamic checkboxes with with following code:

<code>
var pnl = document.getElementById("pnlSalesPeople");

for (i = 0; i < sales.length; i++)
{
var ck = document.createElement("input");

ck.type = "checkbox";
ck.id = "ck" + i;
//ck.checked = true;

var label = document.createElement('label');
label.htmlFor = ck.id;
label.id = "label" + i;
label.appendChild(document.createTextNode(sales[i]));

pnl.appendChild(ck);
pnl.appendChild(label);
pnl.appendChild(document.createElement('<br />'));
}
</code>

All the checkboxes get put into the panel, one per line, as expected. However, clicking on any of them does not change their checked state--if I uncomment the line setting the state above, all the checkboxes are checked, but they don't become unchecked when clicking on them.

I'm thinking I'm missing something that will make these checkboxes behave like they should or my approach to dynamic creation is flawed. In any event, my knowledge of Javascript is certainly not at expert level so I'm hoping there might a simple solution to my dilemma. Any help on this is genuinely appreciated. TIA

im trying to create a script for greasemonkey (tried getting help from their discussion forums, but no one ever answers), but its still written in javascript.

so here is what im trying to do. Ive got a dynamically created division that aligns to the right of the browser window. Now im trying to put links inside it as you normally would with like a document.write statement or other methods.
The only problem is, any method i try wont work for me.

heres my code, maybe someone could give me some things i could try.
Code:

function QuickLinks() 
{ 
	var body = document.body;
	var div2 = document.createElement("div");
	div2.setAttribute('class','QL');
	div2.setAttribute('style','background-color: #692510;width: 200px;height: 500px;top: 2cm;position: absolute;right: 5px;z-index: 4;');
	var links = document.createTextNode("where i want my links"); //now with that statement it just writes text, ive tried document.write and many other methods and nothing seems to work.
	div2.appendChild(links);  //this just inserts the links into the div.
	body.appendChild(document.createElement('br'));
	body.appendChild(div2);
}

QuickLinks();

Hi. I've dynamically created some divs, how do I select a specific div to use?

Code:

//create box for length of letters in word
		var i = 0;
		for(i=0;i<wL;i++){		
			cBoxes = document.createElement("div");
				cBoxes.className = "letterBoxes";
						hangMan.appendChild(cBoxes);
				}

So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game).

On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created).

I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc.

If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos).

Any hints?

I have the following code which adds a dynamically created textbox to a form:

Code:

function addarow() {
if (count > 5) {return false}
count ++;
 addbox = '<input type = "text" name = "txt1" id = "txt1" class = "box">'; 
document.getElementById("boxes"+count).innerHTML = addbox + "<br>";
}

I am having difficulties in assigning different names/ids to the sequential textboxes, that is "txt"+count to give txt1, txt2 etc.

Your assistance will be much appreciated.

A child of five would understand this. Send someone to fetch a child of five.
Groucho Marx

Hello,

I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null.

Is what I'm trying to do here actually possible?

Code:

	for(var i = 0; i < tables.length; i ++)
	{
		var newDiv = document.createElement("div");
		newDiv.setAttribute("id", tables[i].name);
		newDiv.setAttribute("name", tables[i].name);
		newDiv.setAttribute("class", "hidden");
		newDiv.innerHTML += tables[i].name;
		newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
		newDiv.innerHTML += "<tr>";
		
		for(var rows = 0; rows < table.arrayOfFields.length; rows++)
		{
			newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
			numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
		}
		
		newDiv.innerHTML+="<tr>";

		for(var cols = 0; cols < numOfEntries; cols++)
		{
			
			for(var rows = 0; rows < table.arrayOfFields.length; rows++)
			{
				newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
			}
			
			newDiv.innerHTML+="<tr>";
		
		}
		
		newDiv.innerHTML+="</table>";
		document.body.appendChild(newDiv);

	}

Hi all,

I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code

Code:

function updateStatusIcons(retText) {
	updatingStatuses = true;
	var updates = retText.split("|");

	for (z=0; z<updates.length; z++) {
		var sysId = trim(updates[z].split(":")[0]);
		var projectId = trim(updates[z].split(":")[1]);

		if (projectId != "") {
			var statusImg = getSysidsImg(sysId);
			statusImg.src = "images/tick.gif";
			statusImg.className = "hand";
			statusImg.title = "Project "+ projectId +" created, Click here to find in project search";
			statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; };

			// Remove sysid from csv
			removeSysidfFromCSL(sysId);
		}
	}


	if (pollingOn) {
		pollingupdate = setTimeout("checkForProjectComplete()", 5000);
	}
	updatingStatuses = false;

	if (runErrorFunction) {
		markErrors();
	}
}

Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to?

TIA,
Dale

Hello, I am trying to save a dynamically created anchor's id onclick, but I am having a lot of trouble.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>

<body onload="initAll();">
<div id="test"></div>

<script type="text/javascript">
var xhr = false;			//global xhr variable
var allRequestIds = new Array();
var allRequestDates = new Array();
var allRequestNames = new Array();
var allRequestBriefs = new Array();
var allListLinks = new Array();
var allListItems = new Array();
var linkId;       //global variable for clicked link's id; set to be the same as xml data's id; used to pull more data in next page


function initAll(){
	if (window.XMLHttpRequest){		//initialize xmlhttprequest into xhr variable
	xhr = new XMLHttpRequest();
	}
	else{}//ie stuff goes here
	xhr.open("GET","xml/request.xml",true);		//open connection
	xhr.onreadystatechange=createLinks;				//onreadystatechange call createLinks()
	xhr.send(null);	
}

function createLinks(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			if(xhr.responseXML){
				var allRequests=xhr.responseXML.getElementsByTagName("request");		//save all requests into array
				var newList=document.createElement("ol");                               //create a new ordered list
				for(i=0;i<allRequests.length;i++){                        //arrays of each tag, and an array of links
					allRequestIds[i]=allRequests[i].getElementsByTagName("requestId")[0].firstChild.nodeValue;
					allRequestDates[i]=allRequests[i].getElementsByTagName("date")[0].firstChild.nodeValue;
					allRequestNames[i]=allRequests[i].getElementsByTagName("name")[0].firstChild.nodeValue;
					allRequestBriefs[i]=allRequests[i].getElementsByTagName("brief")[0].firstChild.nodeValue;
					allListLinks[i]=document.createElement("a");            //create an array of links
					allListLinks[i].appendChild(document.createTextNode(""+allRequestDates[i]+" "+allRequestNames[i]+" "+allRequestBriefs[i]+""));    //i don't know how to add a new line within createtextnode!!! wtf?! i wanted to add a <br />
					allListLinks[i].setAttribute("href","somepage.html");
					allListLinks[i].setAttribute("class","dynamicLink");		
					allListLinks[i].setAttribute("onclick","pullDetailed();");
					allListItems[i]=document.createElement("li");             //create an array of list items
					allListItems[i].appendChild(allListLinks[i]);  //append each anchor into each list item
					newList.appendChild(allListItems[i]);          //append all list items into ordered list
				}
				document.getElementById("test").appendChild(newList);      //append list into test paragraph
				
			}
		}
	}
}

function pullDetailed(){
	alert("function pullDetailed called!");	//this is just testing to see if this function has been called on anchor click
	linkId=this.innerHTML.;	//this doesn't work
	alert(linkId);
}
</script>
</body>
</html>

does anybody have an ideas? thank you.

Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks


Code:

<script>
function selectAll() 
{
   var i = 0;

 objElems = document.t4.elements;
 for(i=0;i<objElems.length;i++){
 objElems[i].checked =true;
   }
</script>

PHP Code:
<form action="viewall.php" method="post" name="t4">
while(condition)
{
echo "<td ><input type='radio' name='". $approve."' id='app' value='approve' /> Approve<br />   </td> 
        <td ><input type='radio' name='". $approve."' id='disp' value='disapprove' /> Disapprove<br />   </td> ";
}


<tr><td><input type="button" name="all_app" value="Select All Approve" onclick="selectAll(this.value);" ></td>
<td><input type="button" name="all_app2" value="Select All disapprove" onclick="selectAll(this.value);" ></td>
</tr>
</form> 

Hey all,
I'm sure this is very basic but I'm having a hard time adding a hyperlink to text within javascript. I want to add a website link to the text 'click here' that is being displayed under the image within javascipt. I end up modifying the whole image instead, removing the javascript that displays the larger version of the image. Can anyone help me out please? Here's the coding. I'm using Dreamweaver CS5 on a PC to modify a few things and using another website building program to get the basic layout. I'm just a small business owner trying to get my website off the ground. Thanks in advance!

<div id="imCel1_01">
<div id="imCel1_01_Cont">
<div id="imObj1_01">
<a href="javascript:imShowBox('files/june2011.jpg',500,500,'Right click to print....................Click HERE for website!','IMG','t');" title=""><img src="images/p025_1_01.jpg" alt="" title="" /></a> </div>

I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

Thanks.

Code:

/* designImages[x][0] = the image source on the page;
 * designImages[x][1] = the destination url on clicking the image;
*/

		var designImages = new Array();
		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );

		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );

		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );

		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );

		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );

		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );

		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
		
window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (x in designImages)
			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
			};
	}

function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

Hi,

I would just like to know how I would dynamically add another table once text fields in the existing table is clicked on.

So pretty much what I have is a table with 5 textboxes lined up horizontally in the first row along with couple of buttons in the second row.

What I want is that once one text box is clicked, another table like the one above is created and appears below that initial table.
So this is the inital table that should be replicated on each click:

Code:

<table>
		<tr>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><input type="text" ></td>
		</tr>
		<tr>
			<td><button /></td>
			<td><button /></td>			
		</tr>


	</table>

How would I go about achieving this?

Thanks

Hellooo. So I'm having trouble figuring out how to dynamically add another set of rows to a table when a button is clicked. The code below shows what goes into one set. When the button is clicked, it needs to create another three rows with the same format as the code below, but the variable names need to show what row they're on so I can easily call the values that have been inputed in another function that saves the information. Sooo for example the first variable, bhrs1-1 needs to become bhrs4-1 in the next set (because there's already a bhrs2-1 and bhrs3-1 in this set, which would become bhrs5-1 and bhrs6-1 in the new set).


Sorry the code's so long! Help would be greatly appreciated. Thanksss!!


Code:

<TBODY>
	<INPUT TYPE=HIDDEN id=bhrs1-1 name=bhrs1-1><INPUT TYPE=HIDDEN id=comment1-1 name=comment1-1>
	<INPUT TYPE=HIDDEN id=bhrs1-2 name=bhrs1-2><INPUT TYPE=HIDDEN id=comment1-2 name=comment1-2>
	<INPUT TYPE=HIDDEN id=bhrs1-3 name=bhrs1-3><INPUT TYPE=HIDDEN id=comment1-3 name=comment1-3>
	<INPUT TYPE=HIDDEN id=bhrs1-4 name=bhrs1-4><INPUT TYPE=HIDDEN id=comment1-4 name=comment1-4>
	<INPUT TYPE=HIDDEN id=bhrs1-5 name=bhrs1-5><INPUT TYPE=HIDDEN id=comment1-5 name=comment1-5>
	<INPUT TYPE=HIDDEN id=bhrs1-6 name=bhrs1-6><INPUT TYPE=HIDDEN id=comment1-6 name=comment1-6>
	<INPUT TYPE=HIDDEN id=bhrs1-7 name=bhrs1-7><INPUT TYPE=HIDDEN id=comment1-7 name=comment1-7>
			<TR>
				<TD HEIGHT=20 SDVAL="1" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
					<SELECT style="width:500px;" name=project_id1 size=1 onChange='onProjectChanged(1);'>
					<?
					//
					// Load Projects
					//
					// $sresults = mysql_query("SELECT project_id, project, billable_rate, customer_id, Customer.CustomerName FROM Project LEFT OUTER JOIN Customer ON Project.customer_id=Customer.customer_id WHERE status_id='active' ORDER BY project");

					$sresults = mysql_query("SELECT project_id, project, billable_rate, Project.customer_id, CostCenter.DisplayNameShort FROM Project LEFT OUTER JOIN CostCenter ON Project.customer_id=CostCenter.customer_id WHERE status_id='active' ORDER BY customer_id,CostCenter.DisplayNameShort,project");
					// $srate = 0;
					print "<OPTION value='0'>--</OPTION>\n";
					while($arow = mysql_fetch_assoc($sresults))
					{
						// $srate = $arow["billable_rate"];
						print "<OPTION value=\"" . $arow["project_id"] . "\">" . substr($arow["DisplayNameShort"], 0, 15) . ": " . $arow["project"] . "</OPTION>\n";
					}
					// print "\n</SELECT>Billable Rate: <INPUT name=billable_rate value=\"" . $srate . "\" size=10 DISABLED></TD>\n";
					?>	
				</TD>
				<TD>
					<SELECT name=task11 size=1 style="width:220px;" onChange='onTaskChange(1);'>
					<?
					print "<OPTION value='0'>--</OPTION>\n";
					print "<OPTION value='1'>Sales Support</OPTION>\n";
					print "<OPTION value='2'>Project Management</OPTION>\n";
					print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
					print "<OPTION value='4'>Analysis and Design</OPTION>\n";
					print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
					print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
					print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
					print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
					print "<OPTION value='9'>Launch</OPTION>\n";
					print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
					?>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-1 name=hrs1-1 size=2 maxlength=2 onFocus='onCellFocus(1,1);' onChange='calcRowTotal(1,1);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-2 name=hrs1-2 size=2 maxlength=2 onFocus='onCellFocus(1,2);' onChange='calcRowTotal(1,2);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-3 name=hrs1-3 size=2 maxlength=2 onFocus='onCellFocus(1,3);' onChange='calcRowTotal(1,3);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-4 name=hrs1-4 size=2 maxlength=2 onFocus='onCellFocus(1,4);' onChange='calcRowTotal(1,4);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-5 name=hrs1-5 size=2 maxlength=2 onFocus='onCellFocus(1,5);' onChange='calcRowTotal(1,5);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-6 name=hrs1-6 size=2 maxlength=2 onFocus='onCellFocus(1,6);' onChange='calcRowTotal(1,6);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs1-7 name=hrs1-7 size=2 maxlength=2 onFocus='onCellFocus(1,7);' onChange='calcRowTotal(1,7);'><BR>
					</P>
				</TD>
				<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task1total size=2 maxlength=4 DISABLED></B></FONT>
					</P>
				</TD>
			</TR>

	<INPUT TYPE=HIDDEN id=bhrs2-1 name=bhrs2-1><INPUT TYPE=HIDDEN id=comment2-1 name=comment2-1>
	<INPUT TYPE=HIDDEN id=bhrs2-2 name=bhrs2-2><INPUT TYPE=HIDDEN id=comment2-2 name=comment2-2>
	<INPUT TYPE=HIDDEN id=bhrs2-3 name=bhrs2-3><INPUT TYPE=HIDDEN id=comment2-3 name=comment2-3>
	<INPUT TYPE=HIDDEN id=bhrs2-4 name=bhrs2-4><INPUT TYPE=HIDDEN id=comment2-4 name=comment2-4>
	<INPUT TYPE=HIDDEN id=bhrs2-5 name=bhrs2-5><INPUT TYPE=HIDDEN id=comment2-5 name=comment2-5>
	<INPUT TYPE=HIDDEN id=bhrs2-6 name=bhrs2-6><INPUT TYPE=HIDDEN id=comment2-6 name=comment2-6>
	<INPUT TYPE=HIDDEN id=bhrs2-7 name=bhrs2-7><INPUT TYPE=HIDDEN id=comment2-7 name=comment2-7>
			<TR>
				<TD HEIGHT=20 SDVAL="2" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
					<INPUT name=remove1 value=Remove type=button onClick='removeProject(1);'>
				</TD>
				<TD>
					<SELECT name=task12 size=1 style="width:220px;" onChange='onTaskChange(2);'>
					<?
						print "<OPTION value='0'>--</OPTION>\n";
						print "<OPTION value='1'>Sales Support</OPTION>\n";
						print "<OPTION value='2'>Project Management</OPTION>\n";
						print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
						print "<OPTION value='4'>Analysis and Design</OPTION>\n";
						print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
						print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
						print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
						print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
						print "<OPTION value='9'>Launch</OPTION>\n";
						print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
					?>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-1 name=hrs2-1 size=2 maxlength=2 onFocus='onCellFocus(2,1);' onChange='calcRowTotal(2,1);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-2 name=hrs2-2 size=2 maxlength=2 onFocus='onCellFocus(2,2);' onChange='calcRowTotal(2,2);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-3 name=hrs2-3 size=2 maxlength=2 onFocus='onCellFocus(2,3);' onChange='calcRowTotal(2,3);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-4 name=hrs2-4 size=2 maxlength=2 onFocus='onCellFocus(2,4);' onChange='calcRowTotal(2,4);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-5 name=hrs2-5 size=2 maxlength=2 onFocus='onCellFocus(2,5);' onChange='calcRowTotal(2,5);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-6 name=hrs2-6 size=2 maxlength=2 onFocus='onCellFocus(2,6);' onChange='calcRowTotal(2,6);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs2-7 name=hrs2-7 size=2 maxlength=2 onFocus='onCellFocus(2,7);' onChange='calcRowTotal(2,7);'><BR>
					</P>
				</TD>
				<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task2total size=2 maxlength=4 DISABLED></B></FONT>
					</P>
				</TD>
			</TR>

	<INPUT TYPE=HIDDEN id=bhrs3-1 name=bhrs3-1><INPUT TYPE=HIDDEN id=comment3-1 name=comment3-1>
	<INPUT TYPE=HIDDEN id=bhrs3-2 name=bhrs3-2><INPUT TYPE=HIDDEN id=comment3-2 name=comment3-2>
	<INPUT TYPE=HIDDEN id=bhrs3-3 name=bhrs3-3><INPUT TYPE=HIDDEN id=comment3-3 name=comment3-3>
	<INPUT TYPE=HIDDEN id=bhrs3-4 name=bhrs3-4><INPUT TYPE=HIDDEN id=comment3-4 name=comment3-4>
	<INPUT TYPE=HIDDEN id=bhrs3-5 name=bhrs3-5><INPUT TYPE=HIDDEN id=comment3-5 name=comment3-5>
	<INPUT TYPE=HIDDEN id=bhrs3-6 name=bhrs3-6><INPUT TYPE=HIDDEN id=comment3-6 name=comment3-6>
	<INPUT TYPE=HIDDEN id=bhrs3-7 name=bhrs3-7><INPUT TYPE=HIDDEN id=comment3-7 name=comment3-7>
			<TR>
				<TD HEIGHT=20 SDVAL="3" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
					<P><BR>
					</P>
				</TD>
				<TD>
					<SELECT name=task13 size=1 style="width:220px;" onChange='onTaskChange(3);'>
					<?
						print "<OPTION value='0'>--</OPTION>\n";
						print "<OPTION value='1'>Sales Support</OPTION>\n";
						print "<OPTION value='2'>Project Management</OPTION>\n";
						print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
						print "<OPTION value='4'>Analysis and Design</OPTION>\n";
						print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
						print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
						print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
						print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
						print "<OPTION value='9'>Launch</OPTION>\n";
						print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
					?>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-1 name=hrs3-1 size=2 maxlength=2 onFocus='onCellFocus(3,1);' onChange='calcRowTotal(3,1);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-2 name=hrs3-2 size=2 maxlength=2 onFocus='onCellFocus(3,2);' onChange='calcRowTotal(3,2);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-3 name=hrs3-3 size=2 maxlength=2 onFocus='onCellFocus(3,3);' onChange='calcRowTotal(3,3);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-4 name=hrs3-4 size=2 maxlength=2 onFocus='onCellFocus(3,4);' onChange='calcRowTotal(3,4);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-5 name=hrs3-5 size=2 maxlength=2 onFocus='onCellFocus(3,5);' onChange='calcRowTotal(3,5);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-6 name=hrs3-6 size=2 maxlength=2 onFocus='onCellFocus(3,6);' onChange='calcRowTotal(3,6);'><BR>
					</P>
				</TD>
				<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><INPUT id=hrs3-7 name=hrs3-7 size=2 maxlength=2 onFocus='onCellFocus(3,7);' onChange='calcRowTotal(3,7);'><BR>
					</P>
				</TD>
				<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
					<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task3total size=2 maxlength=4 DISABLED></B></FONT>
					</P>
				</TD>
			</TR>
		</TBODY>

Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs.

So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one.

Here is my code..

Code:

<img src="images/add.png" width="15" height="15" align="right" >
    <div class="open">
    
    <table width="200" border="0">
  <tr>
    <td class="propertyCol">Input:&nbsp;</th>
    <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
    <td class="propertyCol">Description:&nbsp;</th>
    <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
    <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
  </tr>
</table>
    <table width="200" border="0">
  <tr>
    <td class="propertyCol">Output:&nbsp;</th>
    <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
    <td class="propertyCol">Description:&nbsp;</th>
    <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
    <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
  </tr>
</table>
</div