Finding cellIndex values when rowspans are greater than 1

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • leemarquis
    New Member
    • Sep 2008
    • 3
    #1

    Finding cellIndex values when rowspans are greater than 1

    Is there a way to determine the correct cellindex of cells in a table when some of the cells have rowspans greater than 1. Perhaps correct is the wrong word - but when I have a cell with a rowspan greater than one, the cellindex of the the cells to its right and one row down are 1 less than I expect.

    This is causing my cell highlight function to behave incorectly as instead of highlighting say 3 cells in a column, it highlights the first and third in the correct column and the second is one column to the right.
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      Ya you can do it, The concept is u can get the row index and iterate each cell with a column count check for null content, if the column value is null means then that particular row has only that no of columns in the row

      ex:
      [HTML] var x= document.getEle mentById('myTab le');
      var row= x.rows.length; // this will take the last row
      var first=row.cells[0].innerHTML; // this will give the last row first column value[/HTML]
      Regards
      Ramanan Kalirajan

        Comment

        • leemarquis
          New Member
          • Sep 2008
          • 3
          #3
          Originally posted by RamananKaliraja n
          Ya you can do it, The concept is u can get the row index and iterate each cell with a column count check for null content, if the column value is null means then that particular row has only that no of columns in the row

          ex:
          [HTML] var x= document.getEle mentById('myTab le');
          var row= x.rows.length; // this will take the last row
          var first=row.cells[0].innerHTML; // this will give the last row first column value[/HTML]
          Regards
          Ramanan Kalirajan
          Many thanks - but can you explain how I use this in more detail please. Im still learning javascript. Would I need to integrate this into the function that does the highlighting? Would I need this to run once or everytime I moused over a cell in the table (so that it calculates the correct cellindexes before going on to highlight the cell and the required number of cells below it)?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              This is not as simple as you think, as this thread from the newsgroup archives demonstrates, but it should help solve your problem.

                Comment

                • leemarquis
                  New Member
                  • Sep 2008
                  • 3
                  #5
                  Thanks - heres what I have come up with which seems to work for small tables but as 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?


                  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>

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      I've not tested your code, but I do notice a lot of loops.

                      Try to optimise the loops. Firstly, work on the findTileToCellM ap function. See how caching the length or using a while loop makes a big difference here.

                        Comment

                        Previous template Next
                        Working...