Javascript Issue

Thu, 03 Sep 2009 07:14:08 -0700

Hello, I am working on a website, which I want to have a table like the one in the link below:

http://centricle.com/lab/dom/col/

When I put it into the page, it wont work for the table that I am trying to add it into. I dont know much about javascript, so I apologize for not being real descriptive :/

I am using a css style sheet for the desing of the page, so I had to name the tags in the table as a class. Is this enough information? Thanks alot for any help!

Heres the code for the table effect:

Javascript Code -

<script type="text/javascript"><!--
/**********************************
highlightTableColumn v0.1

Latest version:
	<http://centricle.com/lab/dom/col/>
**********************************/

function assignClasses() {
	var tables = document.getElementsByTagName("table");
	for (var t = 0; t < tables.length; t++) {
		var tbods = tables[t].getElementsByTagName("tbody");
		for (var b = 0; b < tbods.length; b++) {
			for (var r = 0; r < tbods.rows.length; r++)
				for (var c = 0; c < tbods.rows[r].cells.length; c++)
					tbods.rows[r].cells[c].className = c;
		}
	}
}
function highlightColumn (evt) {
	elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;
	theColumn = elem.className;
	if(document.colsHighlighted) {
		colBg = '';
		cellBg = ''
		document.colsHighlighted = false;
	}
	else {
		colBg = '#ccc';
		cellBg = '#666';
		document.colsHighlighted = true;
	}
	var tables = document.getElementsByTagName("table");
	for (var t = 0; t < tables.length; t++) {
		var tbods = tables[t].getElementsByTagName("tbody");
		for (var b = 0; b < tbods.length; b++) {
			for (var r = 0; r < tbods.rows.length; r++)
				tbods.rows[r].cells[theColumn].style.backgroundCol
or = colBg;
				elem.style.backgroundColor = cellBg;
		}
	}
}
function init() {
	if (document.addEventListener) {
		cells = document.getElementsByTagName("td");
		for (var c = 0; c < cells.length; c++) {
			cells[c].addEventListener("mouseover", highlightColumn, true);
			cells[c].addEventListener("mouseout", highlightColumn, true);
		}
	}
	assignClasses();
}
//-->
</script>[/code]



CSS for the table effect -
<style type="text/css">
	tbody tr:hover {background:#ccc}
</style>



My HTML Table - (notice the class name, next to the tags <td> and <tr>, how can I change it in the javascript portion to only look at those two classes?

<table border="1" cellspacing="5" cellpadding="10" width="485">
	<tbody>
		<tr class = "test">
			<th>&nbsp;</th>
			<td class = "test">
		<font size="1"><b>Month Fee</b></font></td>

			<td class = "test">
		<font size="1"><b>Month Fee</b></font></td>
			<td class = "test">
		<font size="1"><b>Month Fee</b></font></td>
			<td class = "test">
		<font size="1"><b>Month Fee</b></font></td>
		</tr>
		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>

			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
		</tr>

		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>

		</tr>
		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>

			<td align="center">
		<font size="2">price here</font></td>
		</tr>
	</tbody>
	<thead>
	</thead>
	<tbody>
		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>
			<td align="center">
		<font size="2">price here</font></td>

			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
		</tr>
		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>

			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
		</tr>

		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>

		</tr>

		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>

		</tr>

		<tr class = "test">
			<th>
		<font size="1">Iten</font></th>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center">
		<font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>
			<td align="center"><font size="2">price here</font></td>

		</tr>
	</tbody>
</table>

'Javascript Issue' Thread RSS Feed

Javascript Issue