Finding cellIndex values when rowspans are greater than 1

3 New Member

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.

Sep 17 '08 #1

Subscribe Reply

2682

RamananKalirajan

608

Contributor

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

Sep 17 '08 #2

leemarquis

New Member

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)?

Sep 17 '08 #3

acoder

16,027

Recognized Expert Moderator MVP

This is not as simple as you think, as this thread from the newsgroup archives demonstrates, but it should help solve your problem.

Sep 18 '08 #4

leemarquis

New Member

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?

Expand|Select|Wrap|Line Numbers

 <!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>

Oct 6 '08 #5

acoder

16,027

Recognized Expert Moderator MVP

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.

Oct 8 '08 #6

Similar topics

26610

SQL for finding years in dates?

by: Jason Tudisco | last post by:

Hello, I not sure if this is the right place to ask this... I am using mysql. What I need is a SQL statement that can find what years are in the database that is greater than last year. For example... I have a table full of dates ranging from 2001 to 2005..

MySQL Database

2423

Colspans, rowspans, table accessibility

by: Harlan Messinger | last post by:

I've had this in the back of my head for a while. Take a look at Example 1 on http://gavelcade.com/table.html There are three levels of column headings. All table accessibility discussions I've seen would lead to the conclusion that you need to use id and headers attributes on the headers and data cells, respectively, for assistive technology to be able to correctly associate data with headers.

HTML / CSS

2853

Is 'finding' a MySQL keyword or such?

by: ElkGroveR | last post by:

Hi there! I'm using PHP to create a simple, dynamic MySQL SELECT query. The user chooses a selection from a HTML Form SELECT element's many options and submits the form via a POST action. The SELECT query is built as follows: $itemtype = stripslashes(trim($_POST));

MySQL Database

7625

Misleading cellIndex values with rowspan/colspan

by: Matt Kruse | last post by:

Using the .cellIndex property of a TH element to find out which table column it is over can cause misleading results when the table has cells which have rowspans or colspans greater than 1. See example: http://www.javascripttoolbox.com/temp/table_cellindex.html (code pasted below for reference) This behaves according to specs and expectations, however the value of the cellIndex property becomes less useful when using it to determine...

Javascript

27509

<TABLE> vs. <DIV> when and where

by: Davo | last post by:

Hi Folks, There seems to be something about not using tables for layout, but use divs instead. I'm not sure if I've got this right. If the output looks like what you want, then it shouldn't matter what tags you use I would have thought, or am I missing something? tia, Davo

HTML / CSS

3172

Sending ASCII Values to serialport in c#

by: nmsreddi | last post by:

Hi friends I am working on serialport in c# ,i am using C#2005 i have successfully done the serial communication with GSM modem and able to send and receive data , the main problem ,the serial port class in C# is accepting only ASCII values upto 127 only, the values those greater than 127 ,is automatically converted to value 63(?) ,ihave searched alot in the net and finally found from MSDN that ,serialport class accepts only ASCII values...

.NET Framework

6329

Finding lowest value in dictionary of objects, how?

by: davenet | last post by:

Hi, I'm new to Python and working on a school assignment. I have setup a dictionary where the keys point to an object. Each object has two member variables. I need to find the smallest value contained in this group of objects. The objects are defined as follows:

Python

275

12417

Finding the instance reference of an object

by: Astley Le Jasper | last post by:

Sorry for the numpty question ... How do you find the reference name of an object? So if i have this bob = modulename.objectname() how do i find that the name is 'bob'

Python

2631

Getting Values of NaN in Floor Are Ratio (FAR) Calculations

by: Catalyst159 | last post by:

I have a form which is used to calculate residential Floor Area Ratio (FAR). The form is structured into seven parts as follows: Part A: Maximum FAR and Floor Area: Part B: Gross Floor Area of the main floors of the main house: Part C: Gross Floor Area of the basement or cellar: Part D: Gross Floor Area of the attic:

Javascript

9685

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9531

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10459

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10187

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10018

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7553

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5446

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5578

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3735

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP