How to return index value of td?

[michael]

Below is a simplified version of table cell mouseover script, running
separate from the HTML code, that was posted on this group yesterday:

var d=document, td;

function mover(){
this.style.background="red";
td[0].style.background="lime"; // TEST: change 1st cell via any td mouseover
alert(this.td.style.index.value) // HOW TO RETURN THIS TD INDEX VALUE?
}

function mout(){
this.style.background="";
}

td=d.getElementById("myTable").getElementsByTagName("td");
for(var ii=0;ii<td.length; ii++){

td[ii].onmouseover=mover;
td[ii].onmouseout=mout;
}

-----------------------

I found I can easily affect any other separate td by simply:
td[0].style.background="lime";

However, I need to figure which cell the mouse is over in order to make
above "td[depend on this value]" and do a couple of if conditions to
produce slightly different result based on the offset of that value.

How could I retrieve the current index value? Along the lines of this
non-working syntax:
alert(this.td.style.index.value)

What would a correct method/syntax be? Is it the HTMLTableCellElement index
value and if so how can I return that value in the mover function?

Thanks,
michael

 

[Martin Honnen]

michael wrote:

I need to figure which cell the mouse is over

A table cell has a property named
cellIndex
thus with
<td onmouseover="var cellIndex = this.cellIndex;"
you can get at the index.

 

[michael]

<td onmouseover="var cellIndex = this.cellIndex;"

Thanks - I noticed however the cellIndex cannot be overwritten as I got:
"Error: setting a property that has only a getter"

And the "var" in mouseover handler didn't work as above, but worked fine
when omitted, as below:

<script>
function showIndex(){
document.forms.display.text.value = myCell;
}
</script>

<form name="display">
<input name="text" type="text">
</form>

<table cellpadding="10" cellspacing="0" border="1">
<tr>
<td onmouseover="myCell=this.cellIndex;showIndex()">cell 0</td>
<td onmouseover="myCell=this.cellIndex;showIndex()">cell 1</td>
<td onmouseover="myCell=this.cellIndex;showIndex()">cell 2</td>
<td onmouseover="myCell=this.cellIndex;showIndex()">cell 3</td>
</tr></table>

--

The problem ... is that we have run out of dinosaurs to form oil with.
Scientists working for the Department of Energy have tried to form oil
using other animals; they've piled thousands of tons of sand and Middle
Eastern countries on top of cows, raccoons, haddock, laboratory rats,
etc., but so far all they have managed to do is run up an enormous
bulldozer-rental bill and anger a lot of Middle Eastern persons. None
of the animals turned into oil, although most of the laboratory rats
developed cancer.
-- Dave Barry, "Postpetroleum Guzzler"

 

[Michael Winter]

Thanks - I noticed however the cellIndex cannot be overwritten as I got:
"Error: setting a property that has only a getter"

No, it can't. If you want to move a cell, you'll have to use methods like
replaceChild or insertBefore. For example:

// Get a reference to the table row
var row = this.parentNode;
// Move the current cell before the first cell
row.insertBefore(this, row.cells[0]);

And the "var" in mouseover handler didn't work as above,

It did work, but it kept the variable, cellIndex, local.

but worked fine when omitted, as below:

<script>

SCRIPT elements require a type attribute.

function showIndex(){
document.forms.display.text.value = myCell;
}
</script>
[snip]

<td onmouseover="myCell=this.cellIndex;showIndex()">cell 0</td>

Why on earth create a global variable? Just pass the index to the function
as an argument:

function showIndex(i) {
document.forms['display'].elements['text'].value = i;
}

<td onmouseover="showIndex(this.cellIndex);">cell 0</td>

[snip]

Hope that helps,
Mike

 

[michael]

Why on earth create a global variable? Just pass the index to the function

as an argument:

Thanks you - your information is being duly digested....

I was in fact trying to pass on TD value's in order to modify colors of
specific table cells etc., but now realise cellIndex is in fact starting at
zero at the beginning of each row.

I will use another example, and with table rows instead of TD's, which is
closer to what I'm trying to do.

The nice script below works by only giving a table id "myTable" to
highlight rows onmousover, without unecessary use of mouseover events in
each <td> tags, thus, separting the procedure from the html code.

But whilst the code being very generic, I still need some exceptions to the
rule, in that if for example, when the mouse hovers over the first row, to
display a different color in that row.

I guess I need to pass a "this.tr.length.value" or something like that onto
a variable of the mover function and then do an if statement within that
function. Something along the lines of:

<script type="text/javascript">
var d=document, tr;

function mover(){
if (EXCEPTION TO RULE HERE IF HOVERING OVER 1ST ROW){
this.style.background="purple";
}
else {
this.style.background="lime";
}
}

function mout(){
this.style.background="";
}

tr=d.getElementById("myTable").getElementsByTagName("tr");
for(var ii=0;ii<tr.length; ii++){

tr[ii].onmouseover=mover;
tr[ii].onmouseout=mout;

}

</script>

How could I pass that on from the loop below? I would greatly appreciate it
if someone could help me fill in the blanks here.

Many thanks!
michael

In the long run, every program becomes rococo, and then rubble.
-- Alan Perlis

 

[Martin Honnen]

I noticed however the cellIndex cannot be overwritten as I got:
"Error: setting a property that has only a getter"

I haven't claimed that you could set cellIndex and I don't think your
original question mentioned anything about changing the index. If you
want to change cells you need to use the DOM methods to remove/replace
child nodes as done in
http://www.faqts.com/knowledge_base/view.phtml/aid/31307/fid/192

And the "var" in mouseover handler didn't work as above, but worked fine

<td onmouseover="myCell=this.cellIndex;showIndex()">cell 0</td>

I strongly suggest to pass that value in as an argument to showIndex, no
need to have a side effect of creating a global variable:
function showIndex (index) {
...
}
<td onmouseover="showIndex(this.cellIndex);">

 

[Michael Winter]

[snip]

But whilst the code being very generic, I still need some exceptions to
the rule, in that if for example, when the mouse hovers over the first
row, to display a different color in that row.

I guess I need to pass a "this.tr.length.value" or something like that
onto a variable of the mover function and then do an if statement within
that function. Something along the lines of:

Table rows have a property, rowIndex, that gives the index of the row
within the table (who would have thought . You can use that to check if
the row in question is the first. But note: rowIndex returns the absolute
index. If you've structured your table with table sections (TBODY, THEAD
and TFOOT), you might want the sectionRowIndex property, which returns a
number relative to the beginning of the containing section.

<script type="text/javascript">
var d=document, tr;

function mover(){
if (EXCEPTION TO RULE HERE IF HOVERING OVER 1ST ROW){

if(0 == this.rowIndex) {
// first row
} else {
// other rows
}

this.style.background="purple";

Like DOM methods, you should check that you can access the style object
before attempting to do so.

if(this.style) {
this.style.background = 'purple';
}

[snip]

tr=d.getElementById("myTable").getElementsByTagName("tr");

You should definitely check that those methods are supported, and that you
get a return value from gEBI before performing that:

// Initialise with an empty array so that 'tr.length'
// can be evaluated without error if the rows are
// unattainable.
var tr = [];

if(d.getElementById) {
var t = d.getElementById('myTable');

if(t && t.getElementsByTagName) {
tr = t.getElementsByTagName('TR');
}
}
for(...

[snip]

Hope that helps,
Mike