/    Sign up×
Community /Pin to ProfileBookmark

Nested tables not displaying in Internet Explorer 8?

Copy linkTweet thisAlerts:
Apr 08.2009

But it displays correctly in Firefox. I know that it actually added it in Internet Explorer because when I looked at the source code, they are all there. I tried to set the visibility to “visible” but that didn’t work either. What else can I do to make IE8 display the elements in the nested table?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorApr 08.2009 — And the code is ...?
Copy linkTweet thisAlerts:
@Corinne_09authorApr 08.2009 — Well, the code is pretty complicated so I'll try my best to simplify it.

So in the HTML I have this:
[code=html]<div class="timesheet" id="timesheet"></div>[/code]

I create a project table dynamically when a project is selected from a dropdown select list (which is also dynamically created).
[CODE]
<select id="project_code" name="project_code" onchange="initTable(this.options[this.selectedIndex].value);addProjectCode(timesheet);"></select>
[/CODE]

This creates the entire project table - the main outer table
[CODE]
 function addProjectCode(srcHolder) {
var pj_code = document.getElementById("pc_table").value;
if(pj_code=='none'){
// do nothing
return;
}

var srcTable = document.createElement("table");
srcTable.borderColor = "Black";
srcTable.width = DEFAULT_WIDTH;
srcTable.id = TrimString(pj_code);
srcTable.layout = "fixed";
srcHolder.appendChild(srcTable);

createProjectRow();
createProjectTagRow();
var wcList = ['Item 1','Item 2','Item 3','Item 4'];
var text = "";

//create workcode rows here
for (var i=0; i< wcList.length; i++) {
document.getElementById("workcode").value = wcList[i];
if (i==0) {
text += wcList[i];
}
else {
text += "," + wcList[i];
}
AddWorkcode();
}
document.getElementById("wc_list").value = text;
createAddWCRow();
addHours(srcTable,1);

var elementID = TrimString("wc_list_text_" + pj_code);
document.getElementById(elementID).value = text;

removeProjFromList();
if (document.getElementById("doReset").value=="true"){
reset();
}
}
[/CODE]

This is the first row of the main outer table
[CODE]
 function createProjectRow() {
//In add_rem_codes.js
getDebugConsole();
setDebugConsole("In function createProjectTable()");
setDebugConsole("Creating project table...");

var projectname = document.getElementById("pc_table").value;
//alert("project name: " + projectname);
var srcTable = document.getElementById(TrimString(projectname));
setDebugConsole("Project name: " + projectname);

var colWidths = ['2%','19%','5%','53%','7%','7%','7%'];
var pcData = ['', '', '', '','','',''];
var newPCCell;
var newPCRow;

//Add the 'Hide PC' button
setDebugConsole("Adding hide project button");
newPCRow = srcTable.insertRow(srcTable.rows.length);
newPCCell = newPCRow.insertCell(0);
var button = createHidePCButton(srcTable.id);
newPCCell.width = colWidths[0];
newPCCell.appendChild(button);
newPCCell = null;

//Add the Project code textbox
setDebugConsole("Adding project code textbox");
newPCCell = newPCRow.insertCell(1);
var pcTxt = createPCTextBox(projectname);
// newPCCell.colSpan = 2;
newPCCell.width = colWidths[1];
newPCCell.appendChild(pcTxt);
newPCCell = null;

//Add empty cell
setDebugConsole("Inserting empty cell");
newPCCell = newPCRow.insertCell(2);
newPCCell.innerHTML = ' ';
newPCCell = null;

//Add the Hidden work code textbox
setDebugConsole("Adding the hidden workcode textbox");
newPCCell = newPCRow.insertCell(3);
newPCCell.colspan
var pcTxt = createHiddenWCListTextBox(projectname);
newPCCell.width = colWidths[3];
newPCCell.appendChild(pcTxt);
newPCCell = null;

//Add the rest of the cells, which are blank
setDebugConsole("Inserting remaining empty cells");
for (var j=4; j < pcData.length; j++) {
newPCCell = newPCRow.insertCell(j);
newPCCell.width = colWidths[j];
newPCCell.innerHTML = pcData[j];
newPCCell = null;
}
}
[/CODE]

This is where the inner table is created and inserted or nested into the second row, cell 1 of the main outer table
[CODE]
 function createProjectTagRow() {
//In add_rem_codes.js
getDebugConsole();
setDebugConsole("In function createProjectTagRow()");
setDebugConsole("Creating project table...");

var projectname = document.getElementById("pc_table").value;
var srcTable = document.getElementById(projectname);
setDebugConsole("Project name: " + projectname);

// var tagTable = document.createElement("table");
// tagTable.name = "tag_" + TrimString(projectname);
// tagTable.id = "tag_" + TrimString(projectname);
// srcTable.appendChild(tagTable);

var colWidths = ['2%','19%','5%','53%','7%','7%','7%'];
var pcData = ['', '', '', '','','',''];
var newPCCell;
var newPCRow;

//Add the tag table to the first cell
newPCRow = srcTable.insertRow(srcTable.rows.length);
newPCCell = newPCRow.insertCell(0);
var tagTable = document.createElement("table");
tagTable.name = "tag_" + TrimString(projectname);
tagTable.id = "tag_" + TrimString(projectname);
tagTable.style.visibility = "visible";
newPCCell.appendChild(tagTable);
newPCCell = null;

newPCRow = tagTable.insertRow(tagTable.rows.length);
newPCCell = newPCRow.insertCell(0);
//Add the 'Hide PC' button
setDebugConsole("Adding hide project tag button");
// newPCRow = srcTable.insertRow(srcTable.rows.length);
// newPCCell = newPCRow.insertCell(0);
var button = createHidePCTagCButton(srcTable.id);
//newPCCell.width = colWidths[0];
newPCCell.appendChild(button);
newPCCell = null;

//Add the Project tag textbox
setDebugConsole("Adding project tag textbox");
newPCCell = newPCRow.insertCell(1);
var pcTxt = createPCTagTextBox(projectname);
newPCCell.width = colWidths[1];
newPCCell.appendChild(pcTxt);
newPCCell = null;

//Add the rest of the cells, which are blank
setDebugConsole("Inserting remaining empty cells");
for (var j=2; j < pcData.length; j++) {
newPCCell = newPCRow.insertCell(j);
newPCCell.width = colWidths[j];
newPCCell.innerHTML = pcData[j];
newPCCell = null;
}
}
[/CODE]

These are added into the nested table "tagTable"
[CODE]
 function AddWorkcode() {
var wc_value = document.getElementById("workcode").value;
var tblId = document.getElementById("pc_table").value;
var tagtablId = "tag_" + TrimString(tblId);
var srcTable = document.getElementById(tagtablId);

var insertIndex = 0;
if (document.getElementById("currently_adding").value=='workcode')
insertIndex = srcTable.rows.length-1;
else
insertIndex = srcTable.rows.length;

srcTable.borderColor = "Black";
srcTable.width = DEFAULT_WIDTH;

var tmpRow = null;
var tmpCell = null;

tmpRow = srcTable.insertRow(insertIndex);

//Add the "hide workcode" button
tmpCell = tmpRow.insertCell(0);
var button = createHideWCButton(wc_value);
tmpCell.appendChild(button);
tmpCell = null;

//Add the textbox containing the workcode
tmpCell = tmpRow.insertCell(1);
var wcTxt = createWCTextBox(wc_value);
tmpCell.appendChild(wcTxt);
tmpCell = null;

//add the textbox to enter in the hours
tmpCell = tmpRow.insertCell(2);
var hrsTxt = createHrsTextBox(wc_value);
tmpCell.appendChild(hrsTxt);
tmpCell = null;

//add the textbox to enter in the description
tmpCell = tmpRow.insertCell(3);
var commentsTxt = createCommentsTextBox(wc_value);
tmpCell.appendChild(commentsTxt);
tmpCell = null;

//add the textbox for the allocated hours
tmpCell = tmpRow.insertCell(4);
var allocTxt = createHrsAllocTextBox(wc_value);
tmpCell.appendChild(allocTxt);
tmpCell = null;

//add the textbox for the used hours
tmpCell = tmpRow.insertCell(5);
var usedTxt = createHrsUsedTextBox(wc_value);
tmpCell.appendChild(usedTxt);
tmpCell = null;

//add the textbox for the remaining hours
tmpCell = tmpRow.insertCell(6);
var remTxt = createHrsRemTextBox(wc_value);
tmpCell.appendChild(remTxt);
tmpCell = null;

var wcListID = TrimString("wc_list_text_" + tblId);

document.getElementById(wcListID).value += "," + removeSpaces(wc_value);

if (document.getElementById("currently_adding").value == "workcode") {
var elementID = TrimString("hrs_" + removeSpaces(wc_value) + "_" + tblId);
var element = document.getElementById(elementID);
addHours(element,0);
// addHours(tmpRow[1],0);
// if (document.getElementById("doReset").value == "true") {
// reset();
// }
}
}
[/CODE]


Hope that helps. So the problem is, it displays visually in Firefox but not in Internet Explorer, although source code tells me that the nested table is in fact created. I can see the outline of the nested table but the elements are hidden or invisible, except for the img buttons. I attached pictures as well so that you can see what's going on. Thanks for your help!

[upl-file uuid=fb911fbc-c672-41b5-a94d-c3122944982e size=33kB]IE8_result.JPG[/upl-file]

[upl-file uuid=70f0333c-87fd-432f-941c-487ae8563d82 size=60kB]FF3_result.JPG[/upl-file]
Copy linkTweet thisAlerts:
@toicontienApr 08.2009 — Put a border on the table cells to see if the cells are actually not being displayed, or if it's the contents not being displayed.
Copy linkTweet thisAlerts:
@Corinne_09authorApr 08.2009 — Oh yeah....I attached a picture. So it does display the table and the contents, but it's maintaining the column width for the main outer table so it's cutting off the inner nested table...so I have to play around with the column width or colspan to display it properly...

[upl-file uuid=a6606505-8437-4879-86cd-abc7b30a5c56 size=35kB]IE8_result2.JPG[/upl-file]
Copy linkTweet thisAlerts:
@Corinne_09authorApr 08.2009 — Thank you toicontien! It displays properly now. I just did a newPCCell.colSpan = 7. And it didn't affect results for Firefox so that's great. Thanks again!
×

Success!

Help @Corinne_09 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,
)...