killboy Posted March 3, 2008 Share Posted March 3, 2008 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?? Link to comment Share on other sites More sharing options...
Ingolme Posted March 3, 2008 Share Posted March 3, 2008 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> Link to comment Share on other sites More sharing options...
killboy Posted March 3, 2008 Author Share Posted March 3, 2008 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... Link to comment Share on other sites More sharing options...
Synook Posted March 3, 2008 Share Posted March 3, 2008 There are no errors in the function - what does your anchor look like now? Link to comment Share on other sites More sharing options...
jhecht Posted March 3, 2008 Share Posted March 3, 2008 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. Link to comment Share on other sites More sharing options...
jeffman Posted March 3, 2008 Share Posted March 3, 2008 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. Link to comment Share on other sites More sharing options...
killboy Posted March 3, 2008 Author Share Posted March 3, 2008 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. Link to comment Share on other sites More sharing options...
jeffman Posted March 3, 2008 Share Posted March 3, 2008 Synook probably meant this line:<a href="java script:void(0)" onclick="java script:getMore()">More</a> Link to comment Share on other sites More sharing options...
killboy Posted March 3, 2008 Author Share Posted March 3, 2008 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. Link to comment Share on other sites More sharing options...
jhecht Posted March 4, 2008 Share Posted March 4, 2008 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). Link to comment Share on other sites More sharing options...
Synook Posted March 4, 2008 Share Posted March 4, 2008 The <a> tag = the anchor tag. Have you never wondered what it stood for? Link to comment Share on other sites More sharing options...
jeffman Posted March 4, 2008 Share Posted March 4, 2008 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! Link to comment Share on other sites More sharing options...
killboy Posted March 5, 2008 Author Share Posted March 5, 2008 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.