Entry

How to add css styles to dynamically added table row?

Jun 25th, 2005 17:57
David F, Gopikanth G,

There is probably a way to directly set the specific bgcolor attribute,
but I prefer to do this via the object's class, as this approach is
generic and can add as many style attributes as you want in one call.
 
1. maintain a reference to the cell, or give it an id (I use both the
non-standard but working "cell.setAttribute("id", sID) and cell.id = sID).
2. when you want to change the style, add the appropriate class to the
element's style. for example, suppose you have a style called 'selected':

.selected {
background-color: #ffff66;
}

you need to add the 'selected' class to the cell's className.

2.1 get the object's class (this uses some functions that are not listed
here, but the names are self explanatory)

getObjectClass = function(obj) {
	if (browser.isIE)
		theClass = obj.className;
	else {
		theClass = obj.getAttribute("class");
	}
	if (isEmpty(theClass))
		theClass = '';
	return theClass;
}

2.2 add the 'selected' class to the cell:

addStyleToObject = function(obj, styleName) {

	var theClass = getObjectClass(obj);
	if (typeof(theClass) == "string") {
		var arr = theClass.split(' ');
		for (var i = arr.length - 1; i >= 0; i--) {
			if (arr[i] == styleName)
				return;
		}
		arr.push(styleName);
		var strclass = arr.join(' ');
		XtrazUtils.setObjectClass(obj, strclass);
	}
	else {
		setObjectClass(obj, styleName);
	}
}