Need to Modify SitePoint JavaScript

[geosite]

I just downloaded a JavaScript file from http://www.sitepoint.com/article/bac...ors-javascript , and it's absolutely awesome. However, I'd like to make the following modifications:

1. It overrides all my CSS styles. Is there a way to modify it so that the alternate colors are only visible on cells that aren't styled?

2. Similarly, can it be modified so that the background colors are only applied to cells in a particular column(s), leaving the other cells under the influence of CSS?

3. Can it be modified so that it doesn't affect rows in the table head section (<thead>)?

4. I can toggle from Alternate to Multiple or Gradient, and I can continue toggling back and forth between Multiple and Gradient. However, I can't go back to Alternate. Can this be fixed?

5. Can it be modified so that a visitor can choose "None of the above," removing all alternate colors?

I'm not asking anyone to answer all of these; I can tackle them one at a time, but I thought it might be a nuisance to start five separate threads when someone might have built a table that already incorporates several of these fixes.

Thanks.

[geosite]

I've come up with a partial fix for #5. I simply added "Default" to my option values...

<form name="methodSelector">
	<select name="selector" onChange="alternate('tabPpl')">

		<option value="doNothing">Default</option>

		<option value="doAlternate">Alternate</option>
		<option value="doMultiple">Multiple</option>
		<option value="doGradient">Gradient</option>
	</select>
	<select name="color" onChange="alternate('tabPpl')">
		<option value="red">red</option>
		<option value="green">green</option>
		<option value="blue">blue</option>
	</select>
</form>

Now the page loads with CSS styles by default. However, if I toggle to Multiple or Gradient, I can't toggle back to Alternate or Default. I can only return to Default by refreshing the page.

[7stud]

1) An element can have multiple classes assigned to the class attribute. If two styles with equal specificity conflict, then the style defined last in the style sheet is the one that applies. The order of the class names in the class attribute has no bearing on the matter. So, you could put the new styles at the bottom of your style sheet, and in the javascript instead of using the assignment operator to assign a class name to the element's .className property, which overwrites the previous value, you can use the += operator instead, e.g.

elmt.className += " newClassName";

Note the leading space in the string. Because that statement is equivalent to:

elmt.className = elmt.className + " newClassName";

if there is no class attribute in the element, you will get an error when you try to retrieve the .className string on the right side of the assignment. So, you need to write a simple if-else statement to handle that.

To go back to the default style, you could get the .className string and use string search and replace functions to remove a particular class name. Similarly, you could also remove one class name and replace it with another.

[geosite]

I'll check that out. Thanks.