/    Sign up×
Community /Pin to ProfileBookmark

IE 8 Bug? Table Row Index

I have 2 custom functions for basically hiding and showing rows in a table. The code gets parent node’s rowIndex and the next available parent node’s rowIndex, and this determines the range of rows to either hide or show. Now, in place I coded checks to see if the parent node is the last available and if so then just show or hide everything up through the last row in the table.

There seems to be a bug in Internet Explorer 8.0. It is not handling the indexing of the rows properly, thus my code is hiding and showing the wrong rows. My code works flawless in Firefox 3.6.3. The problem is that my place of employment uses Internet Explorer.

Does anyone know of a work around? Or can help me understand why this happening? Possibily a more robust way of handling table rows for a hide .

I just starting programming in javascript about 1.5 months ago, so take it easy on me ?

[CODE]function nodeCollapse(nodeId, nodeType){
if (nodeType == ‘project’){
indexOf = getProjectIndexByCode(nodeId);
startPos = document.getElementById(‘pos’ + nodeId).rowIndex + 1;
if ((myProjects.length – 1) < (indexOf + 1)){
//this is the last project then the endPos is the last row
endPos = document.getElementById(‘encapsulation-table’).getElementsByTagName(‘tr’).length – 1;
}else{
endPos = document.getElementById(‘pos’ + myProjects[indexOf + 1].code).rowIndex – 1;
}
}else if (nodeType == ‘site’){
// if we are expanding or collapsing a site node
// not implemented yet
}
for (i=startPos;i<=endPos;i++){
document.getElementById(‘encapsulation-table’).getElementsByTagName(‘tr’)[i].style.display = ‘none’;
}
}[/CODE]

[CODE]function nodeExpand(nodeId, nodeType){
if (nodeType == ‘project’){
indexOf = getProjectIndexByCode(nodeId);
startPos = document.getElementById(‘pos’ + nodeId).rowIndex + 1;
if ((myProjects.length – 1) < (indexOf + 1)){
//this is the last project then the endPos is the last row
endPos = document.getElementById(‘encapsulation-table’).getElementsByTagName(‘tr’).length – 1;
}else{
endPos = document.getElementById(‘pos’ + myProjects[indexOf + 1].code).rowIndex – 1;
}
}else if (nodeType == ‘site’){

}
for (i=startPos;i<=endPos;i++){
document.getElementById(‘encapsulation-table’).getElementsByTagName(‘tr’)[i].style.display = ”;
}
}[/CODE]

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@objNoobauthorMay 25.2010 — I solved the problem and it was not my javascript after all.

The problem consisted of me providing a tfoot in my table with no rows. I had this empty tfoot tag before my tbody. Apparently IE didn't appreciate this empty tfoot and was appending my table.insertRow calls to it, instead of to the tbody. This was the cause of my indexing being thrown off and IE hiding/expanding the wrong rows.

The fix was to delete the <tfoot> and </tfoot> tags since they are not needed nor used. With the tfoot tags gone, my javascript now appends newly created rows to the tbody and my manipulating functions (nodeExpand, and nodeCollapse) work like a charm!!

I was able to find said problem using a IE Dev tools and exploring the dom.

Thanks!
×

Success!

Help @objNoob 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 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...