When writing html table to div, the data from table is unformatted
in [JavaScript]
|
Prev: WebSign: A live demonstration to sign your signature on HTML pages, and save it to database
Next: Motivation of software professionals
From: sil on 4 Feb 2010 17:20 Hi All, I am new to HTML and JavaScript. I am using Javascript to write an HTML table into an HTML div. However, the data from the table appears, inside the DIV, like one long line. When I am using the same Javascript code to write the same table to a HTML page the table appears OK. The question is: Are there some specific things that I should do when writing HTML code to a DIV versus writing HTML code to an HTML page? It looks like inside a DIV the HTML table formatting is gone, only the data is present. Thanks in advance for any help on this matter. See snippet of my code below: function wDoc( wtxt ) { document.getElementById('profile').innerHTML+=wtxt; } function wDocClear() { document.getElementById('profile').innerHTML=""; } function UpdateProfile() //Partial code { var nSelProf = ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value; // Record the currently selected profile for when we Submit this form. ME.PROFILE_INDEX.value = nSelProf; wDocClear(); // Write the top, fixed, portion of the document wDoc( '<html>' ); wDoc( '<head>' ); wDoc( '<\/head>' ); wDoc( '<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">' ); // If there us no Profile selected give them a message. if( nSelProf == -1 ) { wDoc(' <DIV ALIGN="CENTER"><H2>There is no Profile currently selected.<\/H2><\/DIV>' ); } else { //wDoc( "<div class='enc-acct'>Account<\/ div>" ); //wDoc( "<div class='enc-prod'>Products<\/ div>" ); wDoc( '<BR>' ); wDoc( '<TABLE CELLPADDING="1" CELLSPACING="0" BORDER="1" ALIGN="CENTER">' ); wDoc( ' <TR>' ); wDoc( '<TH><strong> Account <\/TH>' ); wDoc( '<TH COLSPAN="2"><strong> Products <\/TH>' ); wDoc( ' <\/TR>' );
From: nick on 4 Feb 2010 19:13 On Feb 4, 5:20 pm, sil <schit...(a)gmail.com> wrote: > Hi All, > > I am new to HTML and JavaScript. > > I am using Javascript to write an HTML table into an HTML div. > However, the data from the table appears, inside the DIV, like one > long line. When I am using the same Javascript code to write the same > table to a HTML page the table appears OK. > The question is: Are there some specific things that I should do when > writing HTML code to a DIV versus writing HTML code to an HTML page? > It looks like inside a DIV the HTML table formatting is gone, only the > data is present. > > Thanks in advance for any help on this matter. See snippet of my code > below: > ... You may want to adjust your tab spacing to a more reasonable size (like 2 spaces) next time you post code; that's pretty much unreadable. The problem, though, comes from not writing the opening and closing tag of an element at the same time. If you just do "e.innerHTML += '<sometag>'", <sometag> will (often? always?) be automatically closed as soon as it is inserted in order to prevent broken markup. If you write the opening and closing tags to the innerHTML all at once, and never write an opening tag without also writing its closing tag at the same time, it should work the way you expect. e.innerHTML += '<sometag> some cdata </sometag>'; -- Nick
From: Thomas 'PointedEars' Lahn on 4 Feb 2010 19:26 sil wrote: > I am new to HTML and JavaScript. > > I am using Javascript to write an HTML table into an HTML div. > However, the data from the table appears, inside the DIV, like one > long line. When I am using the same Javascript code to write the same > table to a HTML page the table appears OK. > The question is: Are there some specific things that I should do when > writing HTML code to a DIV versus writing HTML code to an HTML page? > It looks like inside a DIV the HTML table formatting is gone, only the > data is present. > > Thanks in advance for any help on this matter. See snippet of my code > below: > > function wDoc( wtxt ) > { > document.getElementById('profile').innerHTML+=wtxt; > } Don't, see below. > function wDocClear() > { > document.getElementById('profile').innerHTML=""; > } Chances are that you have given an element an ID which type has no `id' attribute, or that you are appending wrong markup. > function UpdateProfile() //Partial code This function does not look as if it would be used as a constructor, so its identifier should start lowercase. > { > var nSelProf = > ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value; > > // Record the currently selected profile for when we > Submit this form. > ME.PROFILE_INDEX.value = nSelProf; Since `ME' aso. not declared here, one must assume it is defined or declared in an outer execution context. Accessing globals from a local context like this is considered bad code style (it is error-prone, inefficient aso). Your function should be passed references to the objects it is going to modify, and it should use the named arguments instead. > wDocClear(); > > // Write the top, fixed, portion of the document > wDoc( '<html>' ); This cannot work (reliably). `HTML' is the root element of a Valid HTML document, and only elements can have an ID (and are found by document.getElementById()). So you would attempt to create a document of the form <html> ... <... id="profile"> <html> ... </html> </...> ... </html> here, which is obviously not Valid. This and the missing `</table>' end tag is very likely the reason why you observe what you describe. Forget about this approach. If you want to write a complete document, use *one* document.write() call (preceded by a document.open() call and followed by a document.close() call) to write a string you build before, keep the `HTML' element and write a DOCTYPE declaration before it. If you want to update only a specific portion of the document, lose the `HTML' element and all other elements that MUST NOT be children of the target element (in your case that target element is the `DIV' element). You should also avoid `innerHTML', especially with tables; use DOM creator and mutator methods instead. If you use `innerHTML', though, do not append to the property repeatedly, but assign to it *once* a string that you build earlier. However, since you have not been aware of this script-*unrelated* problem, it might be a better idea to learn writing proper static HTML before you attempt to do it dynamically. See the FAQ for details: <http://jibbering.com/faq/#posting> PointedEars -- realism: HTML 4.01 Strict evangelism: XHTML 1.0 Strict madness: XHTML 1.1 as application/xhtml+xml -- Bjoern Hoehrmann
From: sil on 5 Feb 2010 14:44
On Feb 4, 7:26 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > sil wrote: > > I am new to HTML and JavaScript. > > > I am using Javascript to write an HTML table into an HTML div. > > However, the data from the table appears, inside the DIV, like one > > long line. When I am using the same Javascript code to write the same > > table to a HTML page the table appears OK. > > The question is: Are there some specific things that I should do when > > writing HTML code to a DIV versus writing HTML code to an HTML page? > > It looks like inside a DIV the HTML table formatting is gone, only the > > data is present. > > > Thanks in advance for any help on this matter. See snippet of my code > > below: > > > function wDoc( wtxt ) > > { > > document.getElementById('profile').innerHTML+=wtxt; > > } > > Don't, see below. > > > function wDocClear() > > { > > document.getElementById('profile').innerHTML=""; > > } > > Chances are that you have given an element an ID which type has no `id' > attribute, or that you are appending wrong markup. > > > function UpdateProfile() //Partial code > > This function does not look as if it would be used as a constructor, so its > identifier should start lowercase. > > > { > > var nSelProf = > > ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value; > > > // Record the currently selected profile for when we > > Submit this form. > > ME.PROFILE_INDEX.value = nSelProf; > > Since `ME' aso. not declared here, one must assume it is defined or > declared in an outer execution context. Accessing globals from a local > context like this is considered bad code style (it is error-prone, > inefficient aso). Your function should be passed references to the > objects it is going to modify, and it should use the named arguments > instead. > > > wDocClear(); > > > // Write the top, fixed, portion of the document > > wDoc( '<html>' ); > > This cannot work (reliably). `HTML' is the root element of a Valid HTML > document, and only elements can have an ID (and are found by > document.getElementById()). So you would attempt to create a document of > the form > > <html> > ... > <... id="profile"> > <html> > ... > </html> > </...> > ... > </html> > > here, which is obviously not Valid. This and the missing `</table>' > end tag is very likely the reason why you observe what you describe. > > Forget about this approach. > > If you want to write a complete document, use *one* document.write() call > (preceded by a document.open() call and followed by a document.close() > call) to write a string you build before, keep the `HTML' element and write > a DOCTYPE declaration before it. > > If you want to update only a specific portion of the document, lose the > `HTML' element and all other elements that MUST NOT be children of the > target element (in your case that target element is the `DIV' element). > You should also avoid `innerHTML', especially with tables; use DOM creator > and mutator methods instead. If you use `innerHTML', though, do not append > to the property repeatedly, but assign to it *once* a string that you build > earlier. > > However, since you have not been aware of this script-*unrelated* problem, > it might be a better idea to learn writing proper static HTML before you > attempt to do it dynamically. > > See the FAQ for details: <http://jibbering.com/faq/#posting> > > PointedEars > -- > realism: HTML 4.01 Strict > evangelism: XHTML 1.0 Strict > madness: XHTML 1.1 as application/xhtml+xml > -- Bjoern Hoehrmann Hi, I followed your advise. That is, generating the whole string and then writing it only once to the innerHTML. It worked beautifully. I cannot thank you enough for this! Cheers, Silvio |