removing/ replace DOM createElement/ appendChild

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

removing/ replace DOM createElement/ appendChild

Post by kendall »

Hello,

I am dynamically creating a table with input fields based on an onchange from an input field.

the following is my code

Code: Select all

function InsertFields(no) {
	     var mytable=document.getElementById(&quote;flight_table&quote;);
	     var mycells = mytable.getElementsByTagName(&quote;TR&quote;).item(0);
		 mytablebody = document.createElement(&quote;TBODY&quote;);
		 		// check to see if elements were already created
		 		if(mytable.rows.length>1){
		 			// delete rows
		 			for(i=1;i<mytable.rows.length;i++){
		 				mycell = mytable.rows&#1111;i];
		 				alert(mycell);
		 				//mytable.removeChild(mycell);
		 			}
		 		}
	    	     for(i=1;i<=no;i++) {
					mycurrent_row=document.createElement(&quote;TR&quote;);
					//for(r=0;r<2;r++) {
		  			mycurrent_cell=document.createElement(&quote;TD&quote;);
	           		currenttext=document.createTextNode(&quote;Route#&quote;+i+&quote;: &quote;);
		   			mycurrent_cell.appendChild(currenttext);
		   			mycurrent_row.appendChild(mycurrent_cell); // end row
					mycurrent_cell = document.createElement(&quote;TD&quote;); // second cell
					myinput = document.createElement(&quote;INPUT&quote;);
					myinput.setAttribute(&quote;type&quote;,&quote;text&quote;);
					myinput.setAttribute(&quote;name&quote;,&quote;Route&quote;+i);
					//currenttext=document.createTextNode('<input type=&quote;text&quote; name=&quote;Route'+i+'&quote;>');
					mycurrent_cell.appendChild(myinput);
		   			mycurrent_row.appendChild(mycurrent_cell); // end row
					//}
					mycells.appendChild(mycurrent_row);
	    		 }
	    		 
	    	mytablebody.appendChild(mycells);
	     mytable.appendChild(mytablebody);
	    // mybody.appendChild(mytable);
	//	mytable.setAttribute(&quote;border&quote;,&quote;2&quote;);
	
	// alert('tbody has '+mytable.rows.length);
	}

Code: Select all

<table id=&quote;flight_table&quote; name=&quote;flight_table&quote; border=&quote;1&quote;><tr><td>Please Indicate Number of Routes</td><td>
		<input type=&quote;text&quote; name=&quote;Flights&quote; id=&quote;Flights&quote; onchange=&quote;InsertFields(this.value)&quote; size=&quote;20&quote;></td></td></tr></table>
Now it works fine but im thinking...what happens when someone changes the the number of inputs to insert.??
well it ends up just adding rather than "replacing"

so im trying to have the function check wether to replace or add more input fields...but to no avail

I want to be able to add or remove or replace the number of input fields based on the visitors input?

Kendall
Post Reply