Cet article décrit la méthode selon laquelle JS + CSS peut déprimer l'affichage des cellules sélectionnées. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JS + CSS L'implémentation peut afficher les cellules sélectionnées </Title>
<style>
td {curseur: main; taille de police: 12px}
.Click {Border-top: 1Px solide # 0033cc; border-bottom: 1px solide #ddeeff; border-left: 1px solide # 0033cc; border-right: 1px solide #ddeeff; padding-top: 5px-right: 3px;}
.Hover {border-top: 1px solide #ddeeff; border-bottom: 1px solide # 0033cc; border-left: 1px solide #ddeeff; border-right: 1px solide # 0033cc; padding: 4px;}
.Normal {Border: 1px solide #fffff; padding: 4px;}
</ style>
</ head>
<body>
<cript>
fonction overbutton () {
if (src = event.srcelement)
if (src.classname == "normal") {
src.classname = 'hover';
}
}
fonction Outbutton () {
if (src = event.srcelement)
if (src.classname == "hover") {
src.classname = 'normal';
}
}
fonction clickbutton () {
if (src = event.srcelement)
if (src.classname == "hover") {
var cellules = document.all.button.Rows [0] .Cells;
pour (i = 0; i <Cells.length; i ++)
{celaires [i] .classname = "normal";
}
src.classname = 'click';
}
}
document.onmouseOver = Overbutton
document.onMouseout = Outbutton
document.onclick = clickbutton </cript>
<Table ID = Button>
<tr>
<Td class = click> quotidien </td>
<Td class = normal> rapport hebdomadaire </td>
<Td class = normal> Rapport mensuel </td>
<Td class = normal> Rapport trimestriel </td>
<Td class = normal> quotidien </td>
<Td class = normal> rapport hebdomadaire </td>
<Td class = normal> Rapport mensuel </td>
<Td class = normal> Rapport trimestriel </td>
</tr>
</ Table>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.