javascript to add select button

[ankur_md]

hi all
im trying to add one more row to my table......
this row will have select button,text fields that would also be generated.....

the Select list have to take values from variable in jsp page..........
please can anyone tell me how to do that.........

i have also attached a image file showing my case.
In that i want that if user clicks add Process Skill button......
there is one more row inserted after the 3rd row...........
this will have alll the form field with the values shown......
regards
ankur

i have attached a file. In that

[alpha_foobar]

We do something similar on a project I am on... only we approach it from the client side completely.

I'll just explain an overview of the algorithm here. So let me know if you need more help. But there are a number of good resources for information on the HTML Dom, attributes and functions of various node types. Even at MSDN (and it looks like your targetting IE http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp ).

Here is our algorithm:
A. Create a template row, give it a unique name. (We also create a header row and an empty table row - but this is optional).
B. Create a Javascript object to handle the dynamic table. And instantiate it with a reference to the template row using the unique ID, we remove this row node from the document (but we maintain a reference to it in the table object).
C. When a user wants a new row, they click a button. We create a deep clone of template and append the clone to the table. Updating the number of rows in the table object (when row count is zero, we show the empty table header, otherwise we show the other header).

Why our algorithm uses templates:
We are drawing JSP using XSLT (which isn't done on the fly... so I don't agree with this architecture... but this seems to be our architects baby). Because our JSP is drawn from XSLT using XSD files to define the data content (and style!!), we don't know anything about the content of the data (except the type), so we draw a template and allow this to be cloned as required by the user.

How our algorithm got dirty:
We were J2EE and JSPs and we actually needed to show any dynamic rows we had saved to the database. But we already had the above algorithm in place. So when we read some dymanic rows from the database, we don't just draw the HTML using JSP, we actually draw the JavaScript functions to create and populate the rows. Its dirty, and it means we have to escape all the data so it isn't literally written by JSP (think newlines, quotes etc).

What would be cleaner and nicer, is if we drew the HTML and then told the javascript object how many rows we had drawn (this is important in our implementation for a number of reasons).

[goro]

Well, Alpha's link to msdn is the best resource for DHTML you'll find out there, finally MS made something that works great! ;). You can also buy a subscription to msdn (but i won't recomend you to do so... as it doesn't work as well as the online one)

Anyway...

Let's say your table has an id=TBL

To add a row, simply:

var oRow = TBL.insertRow();

You can set any property of the row by using the newly created object:
oRow.className = "cuteRow";
oRow.height = 20;
oRow.whatever = whatever.

Also, styles can be set directly to that row:
oRow.style.padding = 10;

Now, that would be an empty row.. without cells... you have two choices now... add as many cells as you need in a object oriented way:
oCell = oRow.insertCell()

or do a nasty but code saving job:
oRow.innerHTML = "<td><select>blablabla </td><td>blablabla... ";

Anyway, check the online msdn dhtml library for a complete reference of DHTML objects, behaviors, attributes, etc...

[alpha_foobar]

There are better resources for DOMs than MSDN.

http://www.mozilla.org/docs/dom/domref/dom_el_ref.html
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html
http://www.mozilla.org/docs/dom/domref/dom_el_ref.html

Also, I typically develop in Mozilla because of its excellent debug interface, first you get accurate information through the Javascript console (IE is almost always wrong in this regard). Secondly, you can add the Venkman Javascript debugger... Its awesome.

I just use MSDN when I have to make it work in Internet Explorer (that would be never if I got my way at work) and IE doesn't accept the Mozilla way of doing things... I wouldn't do it this way if IE debug environment was better.

Also, the mechanism of cloning a table row does make it easy (and browser independent). Though creating a dom structure yourself is a valid alternative.. I tend to avoid using innerHTML... it doesn't always work the same way as.. DOM traversal can become difficult - which isn't always a big deal... but usually is for me.

An example of table row cloning.. should be able to just paste this into an html page and play.. works in IE and Mozilla:

<input type="button" value=" add " onclick="addRow()"/>

<table id="test_table">
   <tr id="template_row" bgcolor="red"><td><input type="text" name="b"/></td></tr>
</table>

<textarea id="innerHtml" style="border:1px dotted #639ACE" rows=20 cols=20></textarea>

<script type="text/javascript">
	var rowCount = 1;
	function addRow(){
		var rowNodeClone = document.getElementById("template_row").cloneNode(true);
		var tableNode 	= document.getElementById("test_table").getElementsByTagName("TBODY").item(0);
		var resultNode 	= document.getElementById("innerHtml");
	 
		rowNodeClone.id = "helloWorld" + (rowCount++);
		rowNodeClone.bgColor = "blue";
	   
		tableNode.appendChild(rowNodeClone);
	
		resultNode.value = tableNode.innerHTML
	   
	}
</script>

[goro]

Well, I'll correct myself then and say "msdn is one of the best" haha.

And you're right, if everyone of us started to use correctly formed DOM, then our live would be much easier... that's why my warning...

So, we have 3 ways to populate those tables:

1 - Nasty innerHTML.
2 - MS way of managing tables.
3 - DOM way. (this one being the better, just a few more lines of coding).

Now, question for alpha.. as I'm more experienced with IE, how does mozilla handles the cloned form elements names?

[alpha_foobar]

Well, both IE and Mozilla basically do DOM the same way... it's just I've found some issues with IE when you actually want to preserve the data that you clone/move around the DOM... it's a little annoying.

When you clone a node, then its a clone... if you want/need to change any attributes then you have to be explicit about it. It is the same in IE.

And I'd say the 3 ways to create any dynamic html:
1. InnerHTML.
2. Deep Clone Node from Template.
3. Build DOM explicitly.

I use all 3... as I said, sometimes you don't care what happens to the DOM structure... so innerHTML is fine. Sometimes you want to create a complex html DOM tree, in which case it makes much more sense to use a template... and sometimes you just want to add a few nodes here and there...

Goro.. if you try Firefox + Venkman to build your apps, then you'd never go back to IE! Its miles ahead of windows script debugger.

[goro]

Hehe, well, the problem is: since more than 1 year ago I'm using "contentEditable" property and I got used to it as is a very interesting feature once you start managing it in deep... My guess is mozilla. wont take TOO long to add something like that, then I'll be able to consider switching...

Anyway, whatwas this topic about? :o haha

[alpha_foobar]

Yup building editable content in mozilla isn't the easiest...

But there are several good html editors that function in mozilla and IE. Which is probably the kind of functionality I would be leaning towards if I was making editable content...