Funny innerHTML behavior

[Jayesh Lalwani]

I'm trying to dynamically generate a table in Javascript. I have a DIV tag inside a TABLE tag. I'm dynamically generating the TR/TD tags as a string and setting the innerHTML of the DIV to the generated string. For some reason, the browser is removing the opening TR and TD tag, and my rows aren't being displayed.

Here's my code

<TABLE class=grid cellSpacing=0>
 
  
 
      <script language="JavaScript" type="text/javascript">
      <!--
      function dynamic_table__Class()
      {
      this.length = 0;
      this.arrObjects = new Array(10);
 
      //private functions
 
 
//public functions
this.drawTable = function()
{
var div = document.getElementById('dynamic_table_div');
alert(div.outerHTML); //first alert
var divHTML = "                  ";
for(i=0; i<this.length; i++)
{
var currentObject = this.arrObjects[ i];
divHTML+='<TR class=row1><TD>'+currentObject.name+'</TD>'
+'<TD>'+currentObject.acctNum+'</TD>'
+'<TD>'+currentObject.svcDate+'</TD>'
+'<TD>'+currentObject.class+'</TD>'
+'</TR>';
}
alert(divHTML);//second alert
div.innerHTML = divHTML;
alert(div.innerHTML );//third alert
 
}
 
      this.insert = function(obj)
      {
 
//add obj to the array of objects
      }
 
      this.remove = function(index)
      {
      //remove object at index
      }
      }
      var dynamic_table = new dynamic_table__Class();
      //-->
      </script>
      <Div id='dynamic_table_div'></Div>
 
    </TABLE>

In my onLoad, I am calling insert multiple times. I am sure insert works correctly. However, whe I call drawTable, the second alert shows < TR >< TD >Mr. Smith< /TD >< TD >1< /TD >< TD >10/10/2000< /TD >< TD >Java< /TD >< /TR > which is correct, but the third alert shows Mr. Smith< /TD >< TD >1< /TD >< TD >10/10/2000< /TD >< TD >Java< /TD >< /TR > . The opening TR and TD tags are removed

I am using IE. I know :roll:

[ September 17, 2005: Message edited by: Jayesh Lalwani ]

[ September 17, 2005: Message edited by: Jayesh Lalwani ]
[ September 17, 2005: Message edited by: Jayesh Lalwani ]

[Marc Larochelle]

Try with the insertRow method. Here is an example :
http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow

[Jayesh Lalwani]

I know about the insertRow. I don't want to use the insertRow method. The reason is that I'm trying to write a custom JSP tag that can populate any HTML tag using Javascript objects. So, for example, my JSP code will be like this

<TABLE>
<my : Dynamic name="dynamic_table">
<TR><TD>$name$</TD><TD>$acctNum$</TD><TD>$svcDate$</TD><TD>$class$</TD></TR>
</my : Dynamic>
</TABLE>

Similarily, if I want to populate a Select, it would be like this

<Select>
<my : Dynamic name="dynamic_select">
<OPTION>$name$</OPTION>
</my : Dynamic>
</Select>

So, my bright idea was to have my custom tag generate a DIV tag and also some javascript that will populate the Div tag with the correct HTML. It would be the equivalent of the iterator tag, except that the iteration would be done on the client side, not the server side. It doesn't work

[ September 17, 2005: Message edited by: Jayesh Lalwani ]
[ September 17, 2005: Message edited by: Jayesh Lalwani ]

[Bear Bibeault]

Two points: 1) a div directly inside a table is incorrect HTML. 2) Why on earth would you defer formatting to the client when you are using JSP? Makes no sense to me.

[Jayesh Lalwani]

Originally posted by Bear Bibeault:
Two points: 1) a div directly inside a table is incorrect HTML. 2) Why on earth would you defer formatting to the client when you are using JSP? Makes no sense to me.

Ouch!! so my idea won't work after all So, much for a generic client-side iterator component. I'll have to make something specific for table. I'll have to add support for other elements later. Ouch, Ouch, Ouch

Formatting is done on the client side is because we want the user to sort/filter the data on the client side before the data is uploaded to the server. The user will add as many rows as s/he wants on the client side and all the rows will be sent to the server when the user submits the form. The Javascript code that I posted was a very simplified version of the final thing. The final product will have a lot more javascript methods for sorting/filtering etc etc

Anyways, don't want to hijack my own thread too much. I was hoping I could have a generic client-side Javascript iterator. Looks like if there is a way, I can't figure it out. Thanks for the info

[Bear Bibeault]

Well there's probably a way to do it -- it just depends upon how much client-side complexity you want to get into. Your componenets would just have to smart enough to not generate invalid html.

[Jayesh Lalwani]

It's fine if it's complex. It's going to be reused in many pages, and if I can write a generic iterator then I might be able to save time

Does it have anything to do with HTML DOM model? I was thinking I could still do it sing createElement/appendChild, but my custom tag will have to parse the HTML in the body of the custom tag

[Eric Pascarello]

Just a quick glance over the discussion, you can not have any other tags inside of a tableto have it render correctly and be proper HTML/XHTML syntax.

You really should be using the insert row as mentioned or the createElement.

Eric