Heres a code I have come up with which allows me to highlight a given number of cells in a table when cell indexes are changed by cells with rowspans greater than 1. It seems to work for small tables but when I apply it to say a 30 column x 50 row table the script becomes unresponsive.

Heres what its supposed to do:

Onmouseover, if the cell is white, and so are the required number of cells below it then it will turn them green, and back to white on mouse out.

If any of the cells in the required block are orange, then it turns the white cells red and leaves the orange ones as is.

Any ideas how to speed this script up and stop it becoming unresponsive in large tables? Is one of the loops causing the problem?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">

window.onerror = function(message, file, line){document.getElementById('debugDiv').innerHTML += '<br />ERROR: '+message+'<br />LINE:'+line;return true;}


function schedulehighlighting(cell,onoff,noofsegments,unbookedcol,bookedcol,availcol,unavailcol)
{
calculatedindex_offirst = getActualCellIndex(cell)
takencells=0
	var table = document.getElementById('scheduletable');
	nocols = document.getElementById('scheduletable').getElementsByTagName('tr')[0].getElementsByTagName('td').length 

	
	norows = document.getElementById('scheduletable').getElementsByTagName('tr').length
	noloops=0
	for (count=0;count<noofsegments;count++) {
		
			var rownumber = cell.parentNode.rowIndex+count;
			
			if (rownumber >= norows){
				break
			}
		
			nocols_thisrow = document.getElementById('scheduletable').getElementsByTagName('tr')[rownumber].getElementsByTagName('td').length 
		
		
			if (cell.cellIndex >= nocols_thisrow){
				cellno = 0
			}else{
				cellno= cell.cellIndex
			}
	
			var currentcell = table.rows[rownumber].cells[cellno];
		
			calculatedindex_ofnext = getActualCellIndex(currentcell)

			cellcount=0
			
			while (calculatedindex_ofnext != calculatedindex_offirst){
			
				var currentcell = table.rows[rownumber].cells[cellcount];
				calculatedindex_ofnext = getActualCellIndex(currentcell)
				cellcount++;			
			}
			
			
			if (currentcell.rowSpan > 1){
				count = count+currentcell.rowSpan-1
			}
			
			
		
			if (currentcell.style.backgroundColor != unbookedcol){
				takencells=takencells+1;
			}
			
	
		noloops = noloops + 1
	}
	
	
	
		for (count=0;count<noofsegments;count++) {
		
			var rownumber = cell.parentNode.rowIndex+count;
			
			if (rownumber >= norows){
				break
			}
		
			nocols_thisrow = document.getElementById('scheduletable').getElementsByTagName('tr')[rownumber].getElementsByTagName('td').length 
		
		
			if (cell.cellIndex >= nocols_thisrow){
				cellno = 0
			}else{
				cellno= cell.cellIndex
			}
	
			var currentcell = table.rows[rownumber].cells[cellno];
		
			calculatedindex_ofnext = getActualCellIndex(currentcell)

			cellcount=0
			
			while (calculatedindex_ofnext != calculatedindex_offirst){
			
				var currentcell = table.rows[rownumber].cells[cellcount];
				calculatedindex_ofnext = getActualCellIndex(currentcell)
				cellcount++;			
			}
			
			
			if (currentcell.rowSpan > 1){
				count = count+currentcell.rowSpan-1
			}
			
			
				currentcellcolour = currentcell.style.backgroundColor
	
			if (onoff == 1){
		
				if (takencells==0 && noloops == noofsegments){
					if (currentcell.style.backgroundColor == unbookedcol){
					currentcell.style.backgroundColor = availcol;
					}
				}else{
				if (currentcell.style.backgroundColor == unbookedcol){
					currentcell.style.backgroundColor = unavailcol;
					}
				
				}
			}
		
			if (onoff == 0){
			
			if (currentcell.style.backgroundColor != bookedcol){
					currentcell.style.backgroundColor = unbookedcol;
					}
				
			}
		
	}
	
	
	
	
}


function findTileToCellMap(table, terminatingCell) {
// pass in terminatingCell if you want to get a specific cell's info
// aTiles maps tile position to cell that covers it.
var cellNum, colNum, aTiles = [];
for (var rowNum=0;rowNum<table.rows.length;++rowNum) {
var thisRow=table.rows[rowNum];
for (cellNum=0, colNum=-1;cellNum<thisRow.cells.length;++cellNum) {
var thisCell=thisRow.cells[cellNum];
while (aTiles[rowNum+"x"+ ++colNum]); // next free index
for (var i=0;i<(thisCell.rowSpan || 1);++i)
for (var j=0;j<(thisCell.colSpan || 1);++j)
aTiles[(rowNum+i)+"x"+(colNum+j)]=thisCell;
thisCell.tile = [rowNum, colNum]; // [top, left] - cache value
if (thisCell==terminatingCell) return thisCell.tile; } }
return aTiles; }


function getActualCellIndex(cell) {
// doesn't use cached values
var table = cell.parentNode.parentNode.parentNode;
return findTileToCellMap (table, cell)[1]; }



</script>
</head>

<body>
<table id="scheduletable" width="210" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
  <tr>
    <td width="244"  style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td width="293" rowspan="2" style="background-color:rgb(255, 150, 0)" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td width="205" style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td width="142" style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td rowspan="2" style="background-color:rgb(255, 150, 0)" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3" style="background-color:rgb(255, 150, 0)" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
  </tr>
  <tr>

    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:rgb(255, 150, 0)" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
    <td style="background-color:#FFFFFF" onmouseover="schedulehighlighting(this,1,2,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')" onmouseout="schedulehighlighting(this,0,13,'rgb(255, 255, 255)','rgb(255, 150, 0)','rgb(50, 255, 50)','rgb(255, 50, 50)')">&nbsp;</td>
  </tr>
</table>
<div id="debugDiv"></div>
</body>
</html>