onMouseOver fråga

wborgMedlem sedan dec. 2003209 inlägg

Frågan8 mars 2006 23:03#1

Hej,

jag undrar om det är möjligt att med onMouseOver "markera" en hel kolumn (dvs från top till botten i tabellen)
precis som man kan göra med en hel rad på följande sätt:

<tr onMouseOver="this.style.backgroundColor='#DEEBF3';" onMouseOut="this.style.backgroundColor='';" bgcolor="#EEEEEE">

skulle man skriva likadant i en td så skulle det ju bara bli den cellen som
blev "markerad". Det jag vill är att när man är onMouseOver i rubrikraden i tabellen så ska den "markera" HELA kolumnen,
är man däremot onMouseOver i någon annan
rad så ska raden "markeras" hoppas ni förstår hur jag menar :D

Nu undrar jag då förstås om någon vet om det går och isåfall hur?

Tacksam för all hjälp jag kan få
/S

CssonMedlem sedan feb. 2000438 inlägg

9 mars 2006 00:35#2

function on_cell(direction, that) {
    
    var tag = direction == 'column' ?    'td'
            :                            'tr'
            ;
    
    var alltags = document.getElementsByTagName(tag);
    
    for(var i = 0; i < alltags.length; i++) {
                
        if(direction == 'column' && alltags.item(i).className == that.className) {
            alltags.item(i).style.backgroundColor = 'rgb(240, 240, 200)';
        }
        else if(direction == 'row' && alltags.item(i).className == that.className) {
            alltags.item(i).style.backgroundColor = 'rgb(240, 240, 200)';
        }
    }
}
function out_cell(direction, that) {
    
    var tag = direction == 'column' ?    'td'
            :                            'tr'
            ;
    
    var alltags = document.getElementsByTagName(tag);
    
    for(var i = 0; i < alltags.length; i++) {
                
        if(direction == 'column' && alltags.item(i).className == that.className) {
            alltags.item(i).style.backgroundColor = '';
        }
        else if(direction == 'row' && alltags.item(i).className == that.className) {
            alltags.item(i).style.backgroundColor = '';
        }
    }
}

<table>
    <tr>
        <th class="col_1" onmouseover="on_cell('column', this);" onmouseout="out_cell('column', this);">Rubrik</th>
        <th class="col_2" onmouseover="on_cell('column', this);" onmouseout="out_cell('column', this);">Rubrik</th>
        <th class="col_3" onmouseover="on_cell('column', this);" onmouseout="out_cell('column', this);">Rubrik</th>
    </tr>
    <tr class="row_1" onmouseover="on_cell('row', this);" onmouseout="out_cell('row', this);">
        <td class="col_1">Test</td>
        <td class="col_2">Test</td>
        <td class="col_3">Test</td>
    </tr>
    <tr class="row_2" onmouseover="on_cell('row', this);" onmouseout="out_cell('row', this);">
        <td class="col_1">Test</td>
        <td class="col_2">Test</td>
        <td class="col_3">Test</td>
    </tr>
    <tr class="row_3" onmouseover="on_cell('row', this);" onmouseout="out_cell('row', this);">
        <td class="col_1">Test</td>
        <td class="col_2">Test</td>
        <td class="col_3">Test</td>
    </tr>
</table>

Går ju naturligtvis att göra snyggare t.ex. genom att ge td-arna klasser i stället för att sätta attribut direkt.

wborgMedlem sedan dec. 2003209 inlägg

9 mars 2006 01:05#3

Tack Csson!! Du är just nu kung :D