Page 1 of 1

removing/ replace DOM createElement/ appendChild

Posted: Fri Mar 18, 2005 10:26 am
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