javascript addField() problem

Question

itisnot_me 0 Posting Whiz in Training

15 Years Ago

ok so i have this code to start with

javascript

if(document.createElement) { //W3C Dom method.
		var tr = document.createElement("tr");
		var td = document.createElement("td");
		var input = document.createElement("input");
		input.id = field+count;
		input.name = "the";
		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
		input.appendChild(td);
		field_area.appendChild(td);
		tr.appendChild(input);
		field_area.appendChild(tr);
	}

HTML

<strong>Enemies List</strong><br />
<table id="enemies_area">
<tr><td><input type="text" name="enemy_1" id="enemy_1" /></td></tr>
<tr><td><input type="text" name="enemy_2" id="enemy_2" /></td></tr>
<tr><td><input type="text" name="enemy_3" id="enemy_3" /></td></tr>
<tr><td><input type="text" name="enemy_4" id="enemy_4" /></td></tr>
<tr><td><input type="text" name="enemy_5" id="enemy_5" /></td></tr>
</table>
<input type="button" value="Add Friend Field" onclick="addField('enemy','enemies_area','enemy_',0);" />
</form>

it appends the input field and the tr properly but td's both append before the tr's.

i tried to find some type of documentation but no one has anything

thanks in advance

javascript

3 Contributors
14 Replies
199 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

Try this appending order:

td.appendChild( input );
tr.appendChild( td );
field_area.appendChild(tr);

essential 84 Posting Shark

15 Years Ago

It comes along with table properties that allow's you to control element's inside your <tbody>...childs...</tbody> , if it does exist.

e.g.

alert( yourTable.tBodies.children.length ); // will count all the elements inside a <tbody>, (tr/td/div etc.) will get all the counts

NOTE: that this will only work if you have existing <tbody></tbody> element, inside your <table></table> collections'.

essential 84 Posting Shark

15 Years Ago

Thanks for saying those words...

Try Mozilla Dev and am sure you'll everything you need from there.

Just let me know If you still need anything...

essential 84 Posting Shark

15 Years Ago

Here's a simple demo were you can start new experiments. Just be sure to run the whole document, so that you can get familiarized how the whole program works.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Browser Information</title>
<style type="text/css">
/* <![CDATA[ */

html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

  table {
  border-top : 1px solid;
  border-collapse;
  margin : 1em auto 0 auto;
  padding : 0;
  text-align : left;
  width : 100%; }

  td, th {
  font : normal normal normal 12pt Verdana, Arial, sans-serif;
  border-bottom : 1px solid;
  white-space : pre;
  vertical-align : middle;
  padding : .300em 1em .300em 1em; }

table th:first-child {
  border-right : 1px solid;
  background-color : #ccc;
  width : 20%; }

input[type="text"] {
  text-align : center;
  font-weight : bold;
  min-height : 18px;
  border : 1px solid;
  width : 100%; }


/* ]]> */
</style>
<script type="text/javascript">
<!--
/* Developed By DaniUSER : essential */

var removeField;
var addField;
var newElement;
var viaID;
var backUp;

   viaTN = Boolean( document.getElementsByTagName );

newElement = Object.prototype.newElement = function( whatElement, properties, setValue ) {
  properties = properties.split(/[\s\,]+/);
  setValue = setValue.split(/[\s\,]+/);

  whatElement = document.createElement( whatElement );
  if ( properties.length === setValue.length ) {
      for ( var x = 0; x < properties.length; x++ ) {
      whatElement.setAttribute( properties[ x ], setValue[ x ] );
      }
   return this.appendChild( whatElement );
   }
}; // Lets you create new elements in the document, without spending to much time on its declaration.  

// Additional Function ( Allows you to remove  appended rows. >>>

   removeField = function( table ) { 
   table = (( viaTN ) ? document.getElementsByTagName("table")[ table ] : document.all.tags("table")[ table ] );
   $tr = (( viaTN ) ? table.getElementsByTagName("tr") : table.all.tags("tr") );

   table.removeChild( $tr[ (( $tr.length ) - 1 ) ] );
};

addField = function( fieldLabel, tableID, fieldID, insertNextToField ) { 

   div = (( document.getElementById ) ? document.getElementById("output") : document.all.output );

   tableID = (( viaTN ) ? document.getElementsByTagName("table")[ tableID ] : document.all.tags("table")[ tableID ] )
   $input = (( viaTN ) ? tableID.getElementsByTagName("input") : tableID.all.tags("input") ).length;

   insertNextToField = (( viaTN ) ? document.getElementsByTagName("tr")[ insertNextToField ] : document.all.tags("tr")[ insertNextToField ] );  
   if ( document.createElement ) {
   tr = document.createElement("tr");
   td = document.createElement("td");
   th = document.createElement("th");
   label = document.createElement("label");
   labelTitle = document.createTextNode( fieldLabel + " " + (( $input ) + 1 ));
   input = document.createElement("input");
   input.id = (( fieldID ) + ( $input + 1 ));
   input.name = (( fieldID ) + ( $input + 1 ));
   input.type = "text";
   td.appendChild( input );
   label.appendChild( labelTitle );
   th.appendChild( label );
   tr.appendChild( td ) 
   tr.insertBefore( th, td );
   tableID.appendChild( tr ); 
////////// NEW LINES //////////
/// You create new element doing this format:

// Try all your experiment beyond this line.

   div.newElement("textarea", "id, name, cols, rows", "textA, textA, 60, 10" ); // Creating <textarea>

   div.newElement("img", "id, src, alt, width, height", "img1, image1.jpg, altText, 100, 100"); // Creating image element.

/* The newElement ( prototype ) has 3 parameters.

1. TagName of the element you want to create.

2. Allows you to specify any properties for the element being created, must be delimited by a ( comma or space ).

3. Allows you to any values for the element properties, provided in parameter2. -
  must be delimited by a ( space or comma ). */



   } 
}

// -->
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">

<h2 class="m-title">Enemies List</h2>
<table id="enemies_area" frame="void" rules="none" summary="Highlight Words DEMO">
<tr>
<td style="text-align : center;"><button id="btn2" name="btn2" onclick="addField('enemy','enemies_area','enemy_');">Add Friend Field</button></td><td style="text-align : center;"><button id="btn1" name="btn1" onclick="removeField('enemies_area')">Remove Friend Field</button></td></tr>
<tr>
<th><label for="enemy_1">Enemy 1:</label></th><td><input type="text" name="enemy_1" id="enemy_1" value="" /></td>
</tr>
<tr>
<th><label for="enemy_2">Enemy 2:</label></th><td><input type="text" name="enemy_2" id="enemy_2" value="" /></td>
</tr>
<tr>
<th><label for="enemy_3">Enemy 3:</label></th><td><input type="text" name="enemy_3" id="enemy_3" value="" /></td>
</tr>
<tr>
</table>
<h2 class="m-title">DEMO: Creating Element's</h2>
<div id="output"></div>

</div>
</div>
</body>
</html>

This is a non-standard script, proper modification is required to obtain its full flexibility.
For demontrational purposes only...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

itisnot_me 0 Posting Whiz in Training · Answer 1 · 2009-05-27T12:24:30+00:00

sweet thanks alot.

would you know why there is a tbody if you view the generated source. the new fields append after that

itisnot_me 0 Posting Whiz in Training · Answer 2 · 2009-05-27T13:27:46+00:00

sweet i love you. haha.

is there any good documentation on creating elements. like links and images and stuff

itisnot_me 0 Posting Whiz in Training · Answer 3 · 2009-05-27T14:41:02+00:00

could you explain how the end of the code works

td.appendChild( input );
tr.appendChild( td );
field_area.appendChild(tr);

i tried to add a link then a textarea and then a image but i couldn't fiqure out how to close it all out

Alxandr 5 Junior Poster in Training · Answer 4 · 2009-05-28T01:21:26+00:00

One small tips. Try using insertRow and insertCell instead (you're working with tables right?).

var t = document.createElement('table');
var row1 = t.insertRow(t.rows.length);
var row2 = t.insertRow(t.rows.length);
var cell1_1 = row1.insertCell(row1.cells.length);
var cell1_2 = row1.insertCell(row1.cells.length);
var cell2_1 = row2.insertCell(row2.cells.length);
var cell2_2 = row2.insertCell(row2.cells.length);
//This works on all browser (including IE witch is your only problem)

itisnot_me 0 Posting Whiz in Training · Answer 5 · 2009-05-28T08:02:47+00:00

holy crap that is alot of javascript. and i am a noob.

i played around with your code and it was interesting.

the reason why i liked my code was cause it was simple and i have to make about 100 commands like that for different items.

the structure i was going to do was below. but it will be grabbing different values

tr
td
some text
/td
td
checkbox
/td
td
textarea w/text in it
/td
td
input w/text in it then some text next to it
/td
td
input
/td
td
link with an image in it
/td

It is not that yours was bad actually it was really great. but i sometimes have a problem about using things that i don't know how to or fix if i have a problem

i would love to actually sit down and learn javascript but i get to slammed to do it. i am a php/mysql guy

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-05-28T09:16:17+00:00

Sorry if it was a mess.

I think you might also want to try Alxandr's suggestions, when you are creating dynamic table. It's goes well compared to my example.

Alxandr 5 Junior Poster in Training · Answer 7 · 2009-05-28T11:30:10+00:00

Reed what javascript you can learn at w3schools.com. You won't regrett it.

essential 84 Posting Shark Featured Poster · Answer 8 · 2009-05-28T11:43:29+00:00

Manipulating table elements using DOM is a bit tricky for new learners', so for now try to use the document.create( element ) method for easy handling.

Alxandr 5 Junior Poster in Training · Answer 9 · 2009-05-28T22:05:10+00:00

Problem is that document.create dosn't work on tr, td, and such on IE (witch about 70% of every idiot using the web uses).

essential 84 Posting Shark Featured Poster · Answer 10 · 2009-05-28T22:33:04+00:00

Then try to implement some work here, and show your effective solution, instead of wasting time talking with yourSELF...! If you think you're good, then let your code speak, instead of your mouth!