Style Hover remplacé par le style sélectionné dans la ligne du tableau html

J'ai une table html simple qui a plusieurs rangées. ce qui suit est implémentéStyle Hover remplacé par le style sélectionné dans la ligne du tableau html

1) J'ai donné un style pour l'événement mouseover de la ligne afin qu'il soit surligné une fois que la souris le survole.

2) Chaque ligne a également une case à cocher. Une fois cette option sélectionnée, la ligne dans laquelle se trouve la case à cocher doit également être affichée dans une couleur différente.

Le problème est que, une fois que l'arrière-plan de ligne change après avoir cliqué sur la case à cocher, le style de survol appliqué à l'événement onmoseover de la ligne ne s'applique plus.

Voici le code;

<html> 
<head></head> 

<style type="text/css"> 
    tr { background: blue; } 
    tr:hover { background:green; } 
</style> 

<script type="text/javascript"> 

function Highlight(row) 
{  
    if(document.getElementById('chk').checked) 
    { 
     document.getElementById(row).style.background='Red'; 
    } 
    else 
    {     
     document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }     
    }  
} 

</script> 

<body> 

<table> 
<tr><th>Name</th> <th>Age</th></tr> 

<tr id="row1" bgcolor="#FFFFFF" onMouseOver="className='hover';"> 
<td><input type="checkbox" id="chk" onclick="javascript:Highlight('row1');"</td> 

<td>25</td></tr> 
<tr id="row2"><td>aaaaaa</td><td>25</td></tr> 
<tr id="row3"><td>aaaaaa</td><td>25</td></tr> 

</table> 

</body> 

</html>

Appréciez si vous pouviez me donner une solution.

Source

2010-11-09 user501579

C'est ce que vous voulez,

CSS - option que je

.yellow{ background:yellow; }

Javascript - Option I

function Highlight(row) 
{  
    if(document.getElementById('chk').checked) 
    { 
     document.getElementById(row).className += " yellow"document.getElementById(row).style.background='Red'; 
    } 
    else 
    {  
     document.getElementById(row).className = document.getElementById(row).className.replace(/\byellow\b/,'') 
    } 

    document.getElementById(row).removeAttribute("style"); 
     document.getElementById(row).onMouseOver = function() { this.className += 'hover';      

    hover'; }     
    }  
}

Javascript - Option II

function Highlight(row) 
{  
    if(document.getElementById('chk').checked) 
    { 
     document.getElementById(row).style.background='Red'; 
    } 
    else 
    {  
     document.getElementById(row).removeAttribute("style"); 
     document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }     
    }  
}

HTML

<tr id="row1">

Source

2010-11-09 08:10:45

parfait, cela fonctionne très bien. Merci beaucoup Chinmayee !!! – user501579

Il est à cause de votre if..else:

function Highlight(row) 
{  
    if(document.getElementById('chk').checked) 
    { 
     document.getElementById(row).style.background='Red'; 
    }   
}

Vous ne devriez pas avoir besoin de vos pistes d'autre du tout. Css appliquera automatiquement vos styles: hover.

Source

2010-11-09 08:03:06 Simon

Désolé, je ne pouvais pas parler auparavant, le style de vol stationnaire doit appliquer seulement après que la case à cocher est cochée. mais encore, enlever la partie d'autre n'a pas fonctionné. – user501579

Il fait ce que vous dites de faire, ici:

if(document.getElementById('chk').checked) 
{ 
    document.getElementById(row).style.background='Red'; 
} 
else 
{ 
    document.getElementById(row).onMouseOver = function() { this.className = 'hover'; } 
}

Vous dites, si elle est cochée, alors il est rouge. Si ce n'est pas le cas, alors c'est hover -able.

Pour résoudre ressemblerait à quelque chose comme ceci:

CSS:

.hover { background:blue } 
.hover:hover { background:green } 
.hoverChecked { background:red } 
.hoverChecked:hover { background:green }

JS:

if(document.getElementById('chk').checked) { 
    document.getElementById(row).className = 'hoverChecked'; 
} 
else { 
    document.getElementById(row).className = 'hover'; 
}

Vous pouvez également fixer votre HTML:

<tr id="row1" style='background:#FFFFFF' class='hover'>

Source

2010-11-09 08:03:27 Ben

Compatibilité Ie8-9?

document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }

Ne fonctionne pas ie9.

Source

2013-01-29 07:37:50 Gabee

Problème résolu! Revêtez html cette ligne:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Source

2013-01-29 14:41:21 Gabee

Style Hover remplacé par le style sélectionné dans la ligne du tableau html

Répondre

Questions connexes