DOM [ Document Object Model ] - Cross Browser

Mark_SC.SE · #1 (**permalink**) 09-03-04, 02:27 AM

Hello, Im currently studying the DOM and learning how to create HTML elements and append them etc etc...

But I'm having a slight problem (a cross browser issue). I'm creating a TABLE via the DOM when you click on a link.

Then once you click on the link to create the TABLE, a new link is created that once clicked will add a new TR and TD to the already created TABLE.

This all works fine and is adding a new row to the end of the TABLE everytime the link is clicked, but the TABLE has two columns, and the new TD that is created, I've used a setAttribute to make the single TD "colspan" the two columns.

This works in "Mozilla" / "Netscape" / "Firefox" But doesn't work in "Internet Explorer" / "Opera"

Below is the code I've already written, any help to understand how to get the newly created TD to "colspan" two columns would be much appreciated!

Thanks

Mark McDonnell

/* EXTRA NOTES ADDED */

To get this to work in "Internet Explorer". When creating the TABLE and the new ROWs, I also had to use the HTML element TBODY, otherwise I.E just wouldn't work? The TBODY element wasn't needed on any other browser.

But it could be that the TBODY is classed as a seperate section from other TBODY's that are created prior to the original, and that is why a TD inside one TBODY element can not "colspan" a set of TD's in another TBODY element?

But the TBODY element had! to be used for I.E to work though. Grrrrrrrrrrrr

/* CODE */

Code:

<HTML>
<HEAD>
<TITLE>DOM</TITLE>
<SCRIPT language="Javascript">
<!--
	// My intranet where I'm Dev testing - http://nts3:30/DOM/createTable.htm
	
    function fnCreateTable() {
        var bodyElement = document.getElementsByTagName("BODY").item(0);
        
        tableElement = document.createElement("TABLE");
        // needed to create the TBODY element, as I.E would not create the table otherwise?
		tBodyElement = document.createElement("TBODY");
        
        for(iRowCounter=0; iRowCounter<2; iRowCounter++) {
            currRow = document.createElement("TR");
            
            for(iColCounter=0; iColCounter<2; iColCounter++) {
            
                currCell = document.createElement("TD");
                currText = document.createTextNode("cell is row " + iRowCounter + ", column " + iColCounter);
                
                currCell.appendChild(currText);
                currRow.appendChild(currCell);
				
				currID = "Row" + iRowCounter + "Col" + iColCounter;
				currCell.setAttribute("id",currID);
            }
            
            tBodyElement.appendChild(currRow);
			
			curRowID = "Row" + (iRowCounter + 1);
			currRow.setAttribute("id",curRowID);
        }
        
		tableElement.setAttribute("id","TableIDNum1")
		tableElement.setAttribute("border",1);
        tableElement.setAttribute("cellpadding",5);
		
        tableElement.appendChild(tBodyElement);
        bodyElement.appendChild(tableElement);
		
		/* Create 'Add Table Row' Link */
		
		var objPara = document.createElement("P");
		var objLink = document.createElement("A");
		var objLinkText = document.createTextNode("Add extra row");
		
		objLink.setAttribute("href","javascript:void(fnAddNewTableRow('TableIDNum1'));")
				
		objLink.appendChild(objLinkText);
		objPara.appendChild(objLink);
		bodyElement.insertBefore(objPara,tableElement)
    }
	
	function fnAddNewTableRow(TableIDNum){
		objRowLength = document.getElementsByTagName("TR").length - 1;
		objLastRow = document.getElementsByTagName("TR").item(objRowLength);
		//alert("Last row is = " + objLastRow.id);
	
		var newTableBod = document.createElement("TBODY");
		var newTableRow = document.createElement("TR");
		var newTableCol = document.createElement("TD");
		var newTableTxt = document.createTextNode("Test Row");
		
		newTableCol.setAttribute("colspan",2);
		
		newTableCol.appendChild(newTableTxt);
		newTableRow.appendChild(newTableCol);
		newTableBod.appendChild(newTableRow);
		document.getElementById(TableIDNum).appendChild(newTableBod);
	}
-->
</SCRIPT>
<LINK rel="stylesheet" type="text/css" href="/aspBook/css/general.css">
</HEAD>
<BODY>
   <P id="ParaLink"><A href="javascript:void(fnCreateTable());">Create TABLE</A></P>
</BODY>
</HTML>

TwoD · #2 (**permalink**) 09-03-04, 04:11 AM

That's strange, I've never encountered this problem before.
But then again, I think that this way of creating and appending every element is a waste of both coding and execution time.

Internet Explorer automatically adds a <tbody> tag, which shouldn't be a problem if you could append children or insert HTML to it.

This is how I would do it

Code:

<HTML>
<HEAD>
<TITLE>DOM</TITLE>
<SCRIPT language="Javascript">
<!--
	
    function fnCreateTable() {
	var table= "<P><A href=\"javascript:fnAddNewTableRow('TableIDNum1');\">Add extra row</A></P>"
	+ "<TABLE id=TableIDNum1 border=1 cellpadding=\"5\">"
       for(iRowCounter=0; iRowCounter<2; iRowCounter++) {
	    table += "<TR id=Row"+iRowCounter+">"
            for(iColCounter=0; iColCounter<2; iColCounter++) {
            
	 	table+="<TD id=Row0Col0>cell is row "+iRowCounter+", column "+iColCounter+"</TD>"               

            }
		table += "</TR>"
	}

	document.body.insertAdjacentHTML("beforeEnd",table)
    }
	
	function fnAddNewTableRow(TableIDNum){
		objRowLength = document.getElementsByTagName("TR").length - 1;
		var row = "<TR><TD colspan=2>New Row num"+objRowLength+"</TD></TR>"
		//alert("Last row is = " + objLastRow.id);
		document.getElementById(TableIDNum).children(0).insertAdjacentHTML("beforeEnd",row)
	}
-->
</SCRIPT>
<LINK rel="stylesheet" type="text/css" href="/aspBook/css/general.css">
</HEAD>
<BODY>
   <P id="ParaLink"><A href="javascript:fnCreateTable();">Create TABLE</A></P>
</BODY>

But for some reason IE doesn't allow me to insert HTML into the <table> tag or the <tbody> tag after it has been created, otherwise this would have been the fastest way to do it.
Having to create a new <tbody> tag for each new row seems wrong since there should probably be only one <tbody> inside a table.

xangelusx · #3 (**permalink**) 02-26-06, 02:32 PM

Old post, but still relevant. I just ran into this in my own application. One option besides inserting a TBODY tag into your HTML explicitly is to just walk down the DOM from the initial TABLE element looking for the first TR tag. This ensures compatibility in case other browser have some other element defined between the table and tr tags:

Code:

var container = document.getElementById('table_id');
//IE inserts a TBODY tag even if there isn't one defined excplicitly, 
//and the TR must be inserted there. So walk to DOM until we find the first TR
while (container.firstChild.tagName.toLowerCase() !== 'tr') {
	//alert(container.tagName);
	container = container.firstChild;
}
container.appendChild(tr);

xangelusx · #4 (**permalink**) 02-26-06, 02:56 PM

Looks like Mozilla has some sort of text node between the table and tr nodes that causes the code above to fail. Here's an updated version:

Code:

var container = document.getElementById('dataSet_1');
//IE inserts a TBODY tag even if there isn't one defined excplicitly, 
//and the TR must be inserted there. So walk to DOM until we find the first TR
var trs = container.getElementsByTagName('tr');
if (trs) {
	container = trs[0].parentNode;
}