innerHTML problem

[killboy]

Hi there.I have the following code:

<script type="text/javascript">function getMore(){	var opt=document.getElementById("options");	opt.innerHTML=opt.innerHTML+"<tr><td><input type=\"text\"></td><td><input type=\"text\"></td><td><input type=\"text\"></td></tr>";}</script>

And the following table:

<table id="options" align="center" border="1" style="border-collapse:collapse; width:500px; text-align:center"><tr><td>Product</td><td>Quantity</td><td>Price</td></tr><tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr></table><a href="java script:void(0)" onclick="java script:getMore()">More</a>

Supposedly, I click on "More" and there should be another three inputs below.The code works perfectly on Firefox, but when I run it on IE, it tells me there's an error. Could anyone tell me what's going on??

[Ingolme]

Did you read the error Internet Explorer gave you? It might help understand the problem.EditThe problem is that you don't need "javascript:" when using the onclick attribute.Do this:<a href="javascript:void(0)" onclick="getMore()">More</a>

[killboy]

Since my IE is in Spanish, I'll try to translate the error:"Unkown error in execution time"I also removed the "java script:" part from the onclick, but it's still the same...

[Synook]

There are no errors in the function - what does your anchor look like now?

[jhecht]

danos el error en espanol, puedo hablar y leer espanol si nadie mas que mi puede hacerlo.And by the way, you would need to make the input elements part of an input array(give them a name plus the [] at the end, so something like textBracket[] would do) otherwise any php or other server side page will not be able to read the data from them.

[jeffman]

I don't know how IE represents a table in DOM, but is it possible that the browser thinks it's being asked to add html AFTER a tbody element, which maybe it doesn't like?I've had success with both FF and IE using the addRow() and addCell() methods, then using innerHTML to add the contents of the cell.

[killboy]

There are no errors in the function - what does your anchor look like now?

Anchor?? Does it need to have an anchor?? I didn't know that.... Will that be the error?Edit:It doesn't matter, this is what I was trying to achieve: http://www.w3schools.com/js/tryit.asp?file...table_insertrowDeirdre's Dad, thanks for the addRow() and addCell() comment.

[jeffman]

Synook probably meant this line:<a href="java script:void(0)" onclick="java script:getMore()">More</a>

[killboy]

That's what I had at first, and he told me to remove the "java script:" part from the onclick action.But it doesn't matter.Thanks for the help guys.

[jhecht]

That method that you are using is called obtrusive javascript by some people. Basically, what this means is that people who don't have javascript enabled will not be able to view the link, and it is thusly obtrusive on the usability of the web page. An easier way to do this would be to check every anchor on the given page when the dom loads, and to see if the link has a certain class and then add the function from that. I like mootools and the new Element and adopt things that come with it. In mootools, making a new Table Row with Td's is something like this:

var table = $('myTableId');var tr = new Element('tr');var td = new Element('td').setHTML('This is a new HTML cell');tr.adopt(td);table.adopt(tr);

Makes it easier, at least to me.In your loop, that would look something like this with mootools:

function getMore(){	var table = $('tableId');	for(var i=0;i<3;i++){		var tr = new Element('tr');		var td = new Element('td');		var input = new Element('input',{name:'elements[]'});		var tr.adopt(td.adopt(input));	}}

Keep in mind that will only work if you include mootools(I don't like using Element and Node things without the assistance of mootools. You should really look it up).

[Synook]

The <a> tag = the anchor tag. Have you never wondered what it stood for?

[jeffman]

Deirdre's Dad, thanks for the addRow() and addCell() comment.

I'm glad you figured out what I was talking about, since I completely mangled the names of the methods!

[killboy]

The <a> tag = the anchor tag. Have you never wondered what it stood for?

Hehehe... I honestly had a different concept of anchor

...And by the way, you would need to make the input elements part of an input array(give them a name plus the [] at the end, so something like textBracket[] would do) otherwise any php or other server side page will not be able to read the data from them.

Oh, and thanks for the advice, Jhecht; totally useful