How to access <tbody> innerHTML

@NogDogJun 09.2007

I’m playing around with some JavaScript to teach myself some AJAX stuff. I’ve successfully come up with a script whereby I can change the contents of a table by the following JS command, where ‘example’ is the ID value of the HTML table element in question):

[code] document.getElementById(‘example’).innerHTML = xmlHttp.responseText; [/code]

It works great, but what I would prefer to do is change the innerHTML of the <tbody> section within the table. Is there some JS attribute/function that will do this for me, rather than having to assign an ID to the <tbody> and use getElementById()? Something like:

[code] document.getElementById(‘example’).[color=red]something_magic_here[/color].innerHTML = xmlHttp.responseText; [/code]

to post a comment

JavaScript

15 Comments(s) _↴

@felgallJun 09.2007 — #You can't use innerHTML on parts of a table. innerHTML can only be used to replace the entire table.

There are specific DOM commands that allow you to access and update the parts of the table once you reference the table itself. See http://javascript.about.com/library/bldom15.htm for a list of the available methods for accessing parts of a table.

@dicicco2Jun 09.2007 — #stop using innerHTML, take some time and learn the DOM

@Orc_ScorcherJun 09.2007 — #something_magic_here would be tBodies[0], assuming you want to change the first tbody section:

document.getElementById('example').tBodies[0].innerHTML = whatEver

The innerHTML of a TBODY being read-only is a restriction in IE only and it's easy enough to work around this problem.

@Angry_Black_ManJul 07.2007 — #i'm in the exact same boat as nog. if it's true that you cant access tables with innerhtml, why does firefox have no problem with it? from what ive read, firefox very closely adheres to the W3C standards for html/dom/etc/etc

therefore, i am left to belive that IE simply runs its own (sh!tty) show. any comments?

and @ dicicco2, if you ever see this response: im sure nog knows more things than you've ever (or will ever have) forgotten.

@felgallJul 07.2007 — #Internet Explorer does not allow you to use innerHTML on parts of a table.

@Angry_Black_ManJul 07.2007 — #confirm please:

IE is going AGAINST W3C standards regarding innerHTML and it's dissalowed usage on the following tags:

tr

tbody

@dicicco2Jul 07.2007 — #so aaron. i guess maybe im possibly correct in saying that you should learn dom manipulation because innerHTML is NOT standard and it NEVER will be standard. So i don't believe IE is running its own show, it is simply not following some ambiguous non standard declarations.

@felgallJul 07.2007 — #innerHTML is an Internet Explorer proprietary command which all of the other main browsers have adopted. Those other browsers implemented it their own way and are for the most part less restrictive on how it can be used that its inventor. It is not a part of the DOM standards.

@Orc_ScorcherJul 07.2007 — #so aaron. i guess maybe im possibly correct in saying that you should learn dom manipulation because innerHTML is NOT standard and it NEVER will be standard. So i don't believe IE is running its own show, it is simply not following some ambiguous non standard declarations.[/QUOTE]
[url=http://www.whatwg.org/specs/web-apps/current-work/#innerhtml]Bad news[/Url] for you, you'll have to find some other Microsoft invention to ***** and moan about.

@Angry_Black_ManJul 07.2007 — #thanks fel, that clears things up dramatically. im guilty of assuming that if firefox does it, it is more than likely a W3C standard.

as for dicicco2, i merely shot back at your statement which seemed to conclude that nog doesnt know dom. there's a difference between not knowing dom, and mistakenly thinking that a proprietary property works on multiple browsers in the same way.

just tit for tat. can you dig it??

@jasmine1Jul 11.2007 — #hai,

insertRow() method will work in Mac's firefox browser?

for eg,

myNewRow = document.all.myTable.insertRow()

this code is working fine in windows IE. but in MAC is not working. ?

can u help me to resolve this?

@felgallJul 11.2007 — #Don't use document.all as that is proprietart to IE4. Some more modern browsers still support it but all modern browsers support the standard document.getElementById making such proprietary calls as document.all obsolete.

myNewRow = document.getElementById('myTable').insertRow();

@jasmine1Jul 12.2007 — #var tbodyElem = document.getElementById("'.$tmpNodeId.'").rowIndex;alert(tbodyElem);trElem = tableBody.insertRow(tbodyElem+1);trElem.name='.$mainLevelNo.';trElem.value='.$subLevelNo.';trElem.id="'.$tmplformid.'";tdElem=trElem.insertCell();tdElem.value=0;tdElem.style.textIndent='.$indents.';tdElem.id="col_'.$tmplformid.'";tdElem.className="'.$classStyle.'";';

print "<table style= 'position:relative;top:50' cellspacing=3 cellpadding=3 width=100%>";

print "<tbody id=tableBody >";

i am just sending, few sample coding. i found problem near insertRow(). i changed the coding, which you told. still that problem existing. can you check this code?

@jasmine1Jul 12.2007 — #for row , i did like this.

trElem = document.getElementById("tableBody").insertRow(tbodyElem+1);

like that i trying to insert the cell

myNewCell = document.getElementById("myTable").rows[0].insertCell()

but it is not working. can you solve this

@Angry_Black_ManJul 17.2007 — #i think you HAVE to have an argument in insertCell... try a "-1" to see if your code will work

Also in #JavaScript _↴

Looking for correct script please Help building a function for HTML Urgent Help!!!!!!!!!!!!!!!!!!!!!!!

Success!

Help @NogDog spread the word by sharing this article on Twitter...

Tweet This

How to access <tbody> innerHTML

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to access <tbody> innerHTML

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴