So I’m coding a form and I want the user to be able to add more rows to it, if they wish.
So when the user activates a control, I use JS to create some ‘input’ elements (including some radio buttons), add a few attributes to them, and then insert them in a table cell.
It’s not exactly rocket science, even for a JS |\|00|3 such as myself.
Let me expand on this.
I build in Firefox and test in IE. So I use the following code:
// NB: bits and pieces have been left out for the sake of this example. // create the cell var newCell = newRow.insertCell(2); // create the elements var newInput1 = document.createElement('input' ); var newInput2 = document.createElement('input' ); var newLabel1 = document.createElement('label'); var newLabel2 = document.createElement('label'); // set some attributes on those elements newInput1.setAttribute('type', 'radio'); newInput1.setAttribute('name', 'rdoAddRemove_' + rowIndex); newInput1.setAttribute('id', 'rdoAdd_' + rowIndex); newInput1.setAttribute('value', 'Add'); newInput2.setAttribute('type', 'radio'); newInput2.setAttribute('name', 'rdoAddRemove_' + rowIndex); newInput2.setAttribute('id', 'rdoRemove_' + rowIndex); newInput2.setAttribute('value', 'Remove'); newLabel1.setAttribute('for', 'rdoAdd_' + rowIndex); newLabel2.setAttribute('for', 'rdoRemove_' + rowIndex); // append the elements to the cell newCell.appendChild(newInput1); newCell.appendChild(newLabel1); newCell.appendChild(newInput2); newCell.appendChild(newLabel2);
So you can see what I’m trying to do here, and so could Firefox, because it built the code correctly.
IE, on the other hand, displayed the radio buttons, but wouldn’t allow the user to select them. After much hair-pulling and fretting, (because I can’t find a Firebug equivalent for IE), I discovered that IE wasn’t adding the ‘name’ attributes to the ‘input’ elements.
Apparently (and I’ve lost the link now) IE has a ‘feature’ that means you can’t change the name of an element once it has been created.
So I tried this:
newInput = document.createElement('<input name="rdoAddRemove_' + rowIndex + '" />' );
Yay! It now works in IE! …but the good browsers spat the dummy. And I really felt that if I were going to do this then I might as well ‘innerHTML’ everything.
So I remembered my good old friend try {...} catch(err) {...}
and came up with this:
try { // IE will eat this, FF Safari and others will choke on it. newInput1 = document.createElement('<input name="rdoAddRemove_' + rowIndex + '" />'); newInput2 = document.createElement('<input name="rdoAddRemove_' + rowIndex + '" />'); } catch(err) { // Good browsers will eat this instead. newInput1 = document.createElement('input'); newInput2 = document.createElement('input'); }
Now whether this is the best way to do it or not, I don’t know, but it worked in all the browsers I tested it in so I’m happy(-ish).
GRRRRR @ IE for wasting my afternoon!!
You are the man 🙂
I will try and see if I can get it working on NCEATracker.com.
Thanks again!
Hmmm. Don’t take this as gospel truth – it may still be completely wrong. All I know is that it works 🙂
This is heaven. You really helped me end the most frustrating moment in my life.
Thank youuu~ 😀
Awesome. Truly awesome. I have looked at probably 20 other solutions, and this one worked. Microsoft’s official example wouldn’t run in Firefox! This runs in both IE and FF.
Hey man, nice work! Do you by any chance know of an IE equivalent for an HTMLTableRowElement’s rowIndex property? This is what I’m doing, and it works with FF:
var rows = gTableSection.rows;
var rowAttach = rows.namedItem(“attach”);
//determine rowIndex
var rowIndex = rowAttach.rowIndex; // IE starts wining like a pussy here
var insertedRowRef = gTableSection.insertRow(rowIndex);
I know I could iterate through all table rows keep track of how many are there, and I’ll have to do that unless there’s a better way of finding an index of a HTMLTableRowElement.
Hmm.
I’ve never used HTMLTableRowElement before, but I did a quick google and it seems like all the HTMLTable… DOM2 classes are supported by IE4 and newer.
The only thing I can suggest based on your code, is that namedItem returns a Node, whilst rowIndex is an attribute of HTMLTableRowElement.
I’m not sure if that’s what is causing the problem; I’ll have to make up some sample code myself.
Let me know if you find a solution.