<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">
Hello everyone! I got the answer and is it simple!<div><br class="webkit-block-placeholder"></div><div>When appending rows to a table via JavaScript, one must append them to the tbody element directly, not to the table element.</div><div><br class="webkit-block-placeholder"></div><div><div> <td width="600px" valign="top"></div><div> <table width="100%" cellpadding="0" cellspacing="0" border="0"></div><div> <tr><td valign="top" align="center" class="label_1">select sub-categories</td></tr></div><div> <tr><td>&nbsp;</td></tr></div><div> <tr></div><div> <td valign="top" align="center"></div><div> <table id="sub_categories" name="sub_categories" align="left" width="100%" cellpadding="0" cellspacing="0" border="1"></div><div><br class="webkit-block-placeholder"></div><div> <tbody id="sub_categories_tbody"></div><div><br class="webkit-block-placeholder"></div><div> <tr><td>sdffd</td></tr></div><div><br class="webkit-block-placeholder"></div><div> </tbody></div><div><br class="webkit-block-placeholder"></div><div> </table></div><div> </td></div><div> </tr></div><div> </table></div><div> </td></div><div><br class="webkit-block-placeholder"></div><div><br class="webkit-block-placeholder"></div><div><div> // Append the submit td element to the tr element.</div><div> tr_element_submit.appendChild(td_element_submit);</div><div><br class="webkit-block-placeholder"></div><div> // Get the tbody element.</div><div> tbody_element = document.getElementById('sub_categories_tbody');</div><div><br class="webkit-block-placeholder"></div><div> // Append the tr element to the tbody element.</div><div> tbody_element.appendChild(tr_element_submit);</div><div><br class="webkit-block-placeholder"></div><div>This JavaScript works in IE 7 and FF.</div><div><br class="webkit-block-placeholder"></div><div>Thanks again for you tips.</div><div><br class="webkit-block-placeholder"></div><div>Peter -</div><div><br class="webkit-block-placeholder"></div></div></div><div><div><div>On May 30, 2008, at 6:37 PM, Jeff Keys wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">I didn't see that fix it either. As I understand the bug that Michael's link addresses, IE's getElementById finds the first object with either id or name equql to the value. So adding name="sub_categories" wouldn't be a solution, and since you have no other name or id with that value, your code should find the right element and work. I would say we are looking at a different bug. [what?? IE has more than one?]<br> <br>Here's a link to MSDN's discussion: <a href="http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx">http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx</a><br><br>-jeff<br><br><div class="gmail_quote"> On Fri, May 30, 2008 at 2:51 PM, Peter Fogg <<a href="mailto:peter.fogg@sbcglobal.net">peter.fogg@sbcglobal.net</a>> wrote:<br><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"> I added name="sub_categories" attribute to the table declaration -> unfortunately it didn't solve the problem. The article addressed a conflict if one has a form with the sane "name" as another element. The form, in this case, has no "name" attribute.<br> <font color="#888888"> <br> Peter -</font><div><div></div><div class="Wj3C7c"><br> <br> <br> On May 30, 2008, at 2:33 PM, Michael Proctor-Smith wrote:<br> <br> <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"> On Fri, May 30, 2008 at 2:17 PM, Peter Fogg <<a href="mailto:peter.fogg@sbcglobal.net" target="_blank">peter.fogg@sbcglobal.net</a>> wrote:<br> <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"> Thank you one and all for your suggestions!! My apologies for not including<br> sufficient information.<br> This is an excerpt from the html that displays the table:<br> .<br> .<br> .<br> <td width="600px" valign="top"><br> <table width="100%" cellpadding="0" cellspacing="0" border="0"><br> <tr><td valign="top" align="center" class="label_1">select<br> sub-categories</td></tr><br> <tr><td>&nbsp;</td></tr><br> <tr id="sub_categories_table"><br> <td valign="top" align="center"><br> <table id="sub_categories" align="left" width="100%"<br> cellpadding="0" cellspacing="0" border="1"><br> <tr><td>sdffd</td></tr><br> </table><br> </td><br> </tr><br> </table><br> </td><br> .<br> .<br> .<br> Note that the border is on on the target table and that there is a row with<br> nonsense in it already in the table. This row is displayed on the page in<br> all browsers. The objective is to add another row containing an html button<br> via the following JavaScript excerpt:<br> .<br> .<br> .<br> var table_element = document.getElementById('sub_categories');<br> </blockquote> <br> OK, now with some code I can answer your question IE has broken id<br> handling. Found with quick "ie getElementbyID" google search. Check<br> out:<br> <a href="http://remysharp.com/2007/02/10/ie-7-breaks-getelementbyid/" target="_blank">http://remysharp.com/2007/02/10/ie-7-breaks-getelementbyid/</a><br> basically it treats name as id sense you do not have a name tag for<br> your table it breaks. I fixed it in my code by having both id="name"<br> and name="name" in the places I want to address an element.<br> <br> <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"> .<br> // Create a submit button td element.<br> var td_element_submit = document.createElement('td');<br> td_element_submit.setAttribute('colspan', 3);<br> td_element_submit.setAttribute('align', 'center');<br> // Create a sbumit button input element.<br> var submit_element = document.createElement('input');<br> submit_element.setAttribute('id', 'submit');<br> submit_element.setAttribute('type', 'submit');<br> submit_element.setAttribute('value', 'search');<br> // Append the submit button input element to the td element.<br> td_element_submit.appendChild(submit_element);<br> // Create the submit button tr element.<br> tr_element_submit = document.createElement('tr');<br> // Append the submit td element to the tr element.<br> tr_element_submit.appendChild(td_element_submit);<br> // Append the tr element to the table element.<br> table_element.appendChild(tr_element_submit);<br> .<br> .<br> .<br> The second row created by this code appears in FF <a href="http://2.0.0.14" target="_blank">2.0.0.14</a> on a Mac and FF<br> <a href="http://2.0.0.14" target="_blank">2.0.0.14</a> on an XP machine but does not appear in IE 7.0.5730.11 on the XP<br> machine.<br> </blockquote> <br> So I am just going to point out that testing the same browser version<br> on 3 different platform does not do much of anything.<br> <br> <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"> Obviously there is much more to the page and the JavaScript; I'm trying to<br> get this small test to work!<br> Peter -<br> </blockquote></blockquote> <br> </div></div></blockquote></div><br></blockquote></div><br></div></body></html>