If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

function makeSelect(){
var thecell=document.getElementById("cell23"); //or however you want to reference the cell you want to the select to
var sel=document.createElement("select");
sel.options[0]=new Option("text","value"); //easier if you can do this in a loop
thecell.appendChild(sel)
}

Dear Xewalho,
I have already have the codes and call the function addSubRows. There are few issues I know how to add the combo but that is the static one I would just like to copy and add. NExt thing is that in every td would like to have a table and in the table I would like to add add one combo box, input text and remove button and below row should be for the error message. So how to change their id dynamically and also the sub tables too. Below is my codes.

Dear Xelawho,
I would like to change the id of 2nd,3rd column select statement and also the 4th column button and the table in it too. The reason being I need to later capture all this value in a php page.Does it make sense to change the id to be a sequence id or you have other method?

I'm not meaning to be rude, but this is kind of the problem with starting off with a half-assed approach - developing the idea leads to more halfassedness as you try to patch up the problems caused by the short cuts you took.

One thing is that you are creating illegal html here - copying innerHTML like that results in multiple elements with the same ID, which is problematic in itself.

If this is a form to be submitted, I suspect that what you want is unique names for the fields, but anyway, the process is the same.

If you're really against doing this the way it should probably be done (by using createElement like in my snippet above and adding an incrementing counter to the elements as they are created), I can think of two ways - either you run a regex on the entire innerHTML every time you copy it and add it to the table and change the IDs then OR you wait until just before the form is to be submitted, then loop through all the elements you want to give IDs to, filter them by class name and add the IDs at that point.

Being that the first option is so crapulous it makes me sleepy just thinking about it, here's how I'd do the second:

Dear Xelawho,
Actually I took this solution of adding dynamic row from a link in google which I saw many people using it so looks like that is wrong is it? I do not get what exactly is illegal sorry I am new to this process? I get pretty much your idea of function applyIDs() which I guess is best mechanism. But how about my inner table how am I going to give it an unique id and also the rows in it? I got one more problem is that I will have Remove button in the sub table so to make that function if I do not assign any id to it is that possible? Thank you.

Adding IDs later to tables, buttons, whatever, is the same routine as described in my previous post - give each element you want to assign an ID to a unique class name, then loop through those tagNames assigning the appropriate IDs.

For your button to work, you could assign it a class name, loop through all the elements and assign those with that class an onclick handler. Or you could hardcode it the way that I did with the "delete this table" button in post number 4. Assigning an id to the button isn't going to help much if the buttons are created dynamically because you won't know which IDs exist, so you will end up having to go through the first process described above - loop through all the buttons, test their IDs and assign an onclick if they match your criteria.

Dear Xelawho,
What I was trying to clear from you is what you mean by creating illegal html ? Yes the redundant ID is a mistake now below I have attached my latest with no id any more just class names only. Actually in the 4th column is not add another table sorry for my mistake earlier. I have modified your codes in there but my only problem now the remove button codes does not work and how to control that minimum one select must remain in that 4th column. Last I am going to use your method to update the tagID but for serial tagID how to group them by their rows else all be having a running number hope you get my point here?

Dear Xelawho,
I do not get you how to main the tr to the sub table's selects I am a bit blur on that. Another thing on the remove button I put this <input type="button" class="serialRemove" value="Remove" onclick="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.par entNode.parentNode)"> but it give me error saying NotFoundError: Node was not found? I want to learn about this removeChile and the parent node relationship?

Here's a link to a very good page that explains all about the DOM, how to attach attributes, the parent/child model and also how to create elements dynamically so that you can set attributes like their ID at the time of their creation, making it easier for you in the long run. Good luck.

Dear Xewalho,
Regarding the serial combo. I plan to do something like this does this makes sense.First I give each of the sub table and id then iterate through the tables and search for each select and give id of row_sequence ID ? What is your opinion on this?