/    Sign up×
Community /Pin to ProfileBookmark

How to access <tbody> innerHTML

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)

Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@dicicco2Jun 09.2007 — stop using innerHTML, take some time and learn the DOM
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@felgallJul 07.2007 — Internet Explorer does not allow you to use innerHTML on parts of a table.
Copy linkTweet thisAlerts:
@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
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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??
Copy linkTweet thisAlerts:
@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?
Copy linkTweet thisAlerts:
@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();
Copy linkTweet thisAlerts:
@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?
Copy linkTweet thisAlerts:
@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
Copy linkTweet thisAlerts:
@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
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Marika,
tipped: article
amount: 1000 SATS,

tipper: @hatem774,
tipped: article
amount: 1 SATS,

tipper: @nearjob,
tipped: article
amount: 1000 SATS,
)...