www.webdeveloper.com
Results 1 to 6 of 6

Thread: Nested tables not displaying in Internet Explorer 8?

  1. #1
    Join Date
    Mar 2009
    Location
    Edmonton, AB, Canada
    Posts
    12

    Question Nested tables not displaying in Internet Explorer 8?

    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?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    And the code is ...?

  3. #3
    Join Date
    Mar 2009
    Location
    Edmonton, AB, Canada
    Posts
    12
    Well, the code is pretty complicated so I'll try my best to simplify it.

    So in the HTML I have this:
    HTML Code:
    <div class="timesheet" id="timesheet"></div>
    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>
    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();			
    		}
    	}
    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; 
    		}
    	}
    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; 
    		}
    	}
    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();
    //			}
    		}
    	}

    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!
    Attached Images Attached Images

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  5. #5
    Join Date
    Mar 2009
    Location
    Edmonton, AB, Canada
    Posts
    12
    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...
    Attached Images Attached Images

  6. #6
    Join Date
    Mar 2009
    Location
    Edmonton, AB, Canada
    Posts
    12
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles