Exemple de partage de code de couleur d'arrière-plan de table de modification Javascript

Auteur：Eve Cole Date de mise à jour：2025-01-18 15:00:03

Copiez le code comme suit :

<html>

//Définit la couleur de la ligne actuelle en cliquant sur la ligne actuellement sélectionnée, et restaure les couleurs et les événements de souris des lignes autres que la ligne actuelle.

fonction selectRow (cible)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //Parcourt toutes les lignes sauf la première ligne

{

if (sTable.rows[i] != target) //Détermine si la ligne est actuellement sélectionnée

{

sTable.rows[i].bgColor = "#ffffff"; //Définir la couleur d'arrière-plan

sTable.rows[i].onmouseover = curriculum vitaeRowOver; //Ajouter un événement onmouseover

sTable.rows[i].onmouseout = curriculum vitaeRowOut;//Ajouter un événement onmouseout

}

autre

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = "" ; //Supprimer les événements de la souris

sTable.rows[i].onmouseout = "" ; //Supprimer les événements de la souris

}

//Couleur de fond de tr lorsqu'il est déplacé

fonction rowOver (cible)

{

target.bgColor='#e4e4e4';

}

//La couleur d'arrière-plan de tr lors du déplacement

fonction rowOut (cible)

{

target.bgColor='#ffffff';

}

// Restaurer l'événement onmouseover de tr prenant en charge la fonction appelante

fonction reprendreRowOver()

{

rowOver(ce);

}

// Restaurer l'événement onmouseout de tr prenant en charge la fonction appelante

fonction reprendreRowOut()

{

rowOut(ce);

}

</script>

<corps>

<div onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">Pour les deux dernières fonctions reprendreRowOver et reprendreRowOut, veuillez vous référer à ce que j'ai écrit auparavant Ajouter un tableau correspondant à l'événement à l'élément de page via js HTMLview plaincopy vers clipboardprint ?

</div>

<tr>

<th>Le service est important</th>

<th>Statut</th>

<th>Fermé</th>

<th>Informations</th>

</tr>

<td>Contenu associé</td>

</tr>

<td>Contenu associé</td>

</tr>

<td>Contenu associé</td>

</tr>

<td>Contenu associé</td>

</tr>

</table>

</corps>

</html>