<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>        &lt;td width="600px" valign="top"&gt;</div><div>          &lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;</div><div>            &lt;tr&gt;&lt;td valign="top" align="center" class="label_1"&gt;select sub-categories&lt;/td&gt;&lt;/tr&gt;</div><div>            &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;</div><div>            &lt;tr&gt;</div><div>              &lt;td valign="top" align="center"&gt;</div><div>                &lt;table id="sub_categories" name="sub_categories" align="left" width="100%" cellpadding="0" cellspacing="0" border="1"&gt;</div><div><br class="webkit-block-placeholder"></div><div>                  &lt;tbody id="sub_categories_tbody"&gt;</div><div><br class="webkit-block-placeholder"></div><div>                    &lt;tr&gt;&lt;td&gt;sdffd&lt;/td&gt;&lt;/tr&gt;</div><div><br class="webkit-block-placeholder"></div><div>                  &lt;/tbody&gt;</div><div><br class="webkit-block-placeholder"></div><div>                &lt;/table&gt;</div><div>              &lt;/td&gt;</div><div>            &lt;/tr&gt;</div><div>          &lt;/table&gt;</div><div>        &lt;/td&gt;</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 &lt;<a href="mailto:peter.fogg@sbcglobal.net">peter.fogg@sbcglobal.net</a>&gt; 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 -&gt; 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 &lt;<a href="mailto:peter.fogg@sbcglobal.net" target="_blank">peter.fogg@sbcglobal.net</a>&gt; 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>        &lt;td width="600px" valign="top"&gt;<br>          &lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;<br>            &lt;tr&gt;&lt;td valign="top" align="center" class="label_1"&gt;select<br> sub-categories&lt;/td&gt;&lt;/tr&gt;<br>            &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;<br>            &lt;tr id="sub_categories_table"&gt;<br>              &lt;td valign="top" align="center"&gt;<br>                &lt;table id="sub_categories" align="left" width="100%"<br> cellpadding="0" cellspacing="0" border="1"&gt;<br>                 &lt;tr&gt;&lt;td&gt;sdffd&lt;/td&gt;&lt;/tr&gt;<br>                &lt;/table&gt;<br>              &lt;/td&gt;<br>            &lt;/tr&gt;<br>          &lt;/table&gt;<br>        &lt;/td&gt;<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>