J'ai une table construite en PHP, le style est les lignes paires en gris et les lignes impaires en blanc. les lignes peuvent être sélectionnées et désélectionnées, lorsqu'une ligne est sélectionnée, elle devient bleue, maintenant, lorsque je le désélectionne, je veux qu'il revienne au style d'origine (pour le moment, j'ai seulement réussi à rendre la ligne grise, mais le style d'origine est que seules les lignes paires sont grises)
Fonction Sélection et désélection de lignes: obtient une ligne, si une ligne est bleue (par exemple, une ligne est sélectionnée) elle la rend grise, sinon: elle la rend bleue (par exemple la sélectionne)
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
Stlye:
<script>
var selected_sqf =0 ;
var selected_weight=0 ;
function myFunction(row,w) {
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
{row.style.backgroundColor='#dddddd';
selected_sqf -= parseFloat((row.cells[10].innerHTML));
selected_weight -=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
}
else {
row.style.backgroundColor='#1E90FF';
selected_sqf += parseFloat((row.cells[10].innerHTML));
selected_weight +=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
//alert(row.style.backgroundColor)
}
}
</script>
3 Réponses :
Modifiez cette ligne:
if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")
À cette ligne:
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
window.getComputedStyle est une fonction qui prend un élément comme paramètre et renvoie un objet contenant tous les styles utilisés sur cet objet. Nous pouvons alors appeler getPropertyValue sur le résultat pour obtenir la valeur d'une propriété css.
En savoir plus: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
Je vous suggère d'ajouter une classe à la ligne lorsque vous la sélectionnez, et un style en css, au lieu de changer la couleur d'arrière-plan par programme. De cette façon, lorsque vous désélectionnez la ligne, vous devez simplement supprimer la classe que vous avez ajoutée au préalable et elle reviendra à son état d'origine. Consultez l'exemple ci-dessous.
<table id="mytable"> <tr> <th>title 1</th><th>title 2</th><th>title 3</th> </tr> <tr> <td>element</td><td>element</td><td>element</td> </tr> <tr> <td>element</td><td>element</td><td>element</td> </tr> <tr> <td>element</td><td>element</td><td>element</td> </tr> <tr> <td>element</td><td>element</td><td>element</td> </tr> </table>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}
document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}
Cela peut être très simple, il vous suffit d'utiliser la méthode toggleClass () pour ajouter ou supprimer un style du slogan tr choisi. Cela peut être fait facilement avec JQuery.
Essayez ceci: https://www.w3schools.com/jquery/html_toggleclass.asp < / a>
Bonne chance!
Vous pouvez peut-être essayer d'ajouter un nom de classe à la ligne de la table lorsque l'utilisateur sélectionne l'élément et supprimer le nom de classe de la ligne de la table lorsque l'utilisateur sélectionne ailleurs. Utilisez ensuite ce nom de classe pour styliser la ligne du tableau.