Je souhaite changer la couleur de la ligne du tableau lorsque vous cliquez sur le bouton. mais j'ai un problème avec le code. lorsque je clique sur le bouton, la couleur de la ligne du tableau ne change pas.
CSS :
$('#data tr').click(function(e) {
$('#change').click(function() {
$('#data tr').removeClass('highlighted');
$(this).addClass('highlighted');
})
});
HTML strong >:
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">
Change
</button>
JQuery :
tr.highlighted td {
background: red;
}
7 Réponses :
Le gestionnaire click imbriqué n'a aucun sens ici. Au lieu de cela, vous pouvez ajouter une classe particulière, appelons-la active à la dernière ligne cliquée pour en garder une trace. Après cela, lorsque vous cliquez sur le bouton modifier , vous pouvez d'abord supprimer la classe mise en surbrillance de chaque ligne , puis l'ajouter au ligne contenant la classe active :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">Change</button>
tr.highlighted td {
background: red;
}
$('#data tr').click(function(e)
{
$('#data tr').removeClass('active');
$(this).addClass('active');
});
$('#change').click(function()
{
$('#data tr').removeClass('highlighted');
$("tr.active").addClass('highlighted');
});
@AlulR De rien. Pensez à choisir une réponse acceptée lorsque vous en avez le temps. En outre, vous pouvez voter pour une réponse utile lorsque vous avez une réputation suffisante.
Vous pouvez faire:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change" disabled>
Change
</button>
tr.highlighted td {
background: red;
}
const $dataTr = $('#data tr');
const $change = $('#change');
let $toBeChanged = null;
$dataTr.click(function() {
$toBeChanged = $(this);
$change.prop('disabled', false);
});
$change.click(function() {
$dataTr.removeClass('highlighted');
$toBeChanged.addClass('highlighted');
})
Le this dans $ (this) .addClass ('mis en surbrillance'); fait référence au bouton, pas à la ligne du tableau, puisque this sera défini sur tout événement déclenché en événement pour déclencher la fonction de rappel pour exécuter, dans ce cas, l'élément avec l'id change . L'un des moyens les plus simples de résoudre ce problème serait d'assigner this à une autre variable avant de faire $ ('# change'). Click (function () {...}) .
Sinon, si vous voulez vous assurer qu'une seule ligne de table est modifiée à la fois, vous devez séparer le ('#data tr'). click (function (e) {...}) et $ ('# change'). click (function () {...}) pour qu'ils ne soient pas imbriqués, ont une variable en dehors des deux qui garde la trace de quelle ligne était cliqué pour la dernière fois, et lisez cette variable chaque fois que $ ('# change'). click () est déclenché (au lieu de capturer la ligne de table sur laquelle vous avez cliqué lorsque vous enregistrez le rappel).
Vous pouvez utiliser les méthodes index et eq de jquery. Supprimez le clic imbriqué. Tout d'abord, cliquez sur la ligne de la table pour obtenir l'index de la ligne dans la table à l'aide de index . La valeur commence à 0 . Définissez cette valeur sur une variable. Ensuite, cliquez sur le bouton utiliser eq pour obtenir la ligne du tableau et y ajouter une classe
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">
Change
</button>
tr.highlighted td {
background: red;
}
let getRowIndex;
let elem = $('#data tr');
elem.click(function(e) {
getRowIndex = $(this).index()
});
$('#change').click(function() {
if (getRowIndex !== undefined) {
elem.removeClass('highlighted');
elem.eq(getRowIndex).addClass('highlighted');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">
Change
</button>
tr.highlighted td {
background: red;
}
$(document).ready(function(){
$('#data tr').click(function(e) {
if($(this).attr("class") == 'highlighted'){
$(this).removeClass('highlighted');
}else{
$(this).addClass('highlighted');
}
});
})
Vous attachez l'événement click à la table tr's, puis dans la fonction de rappel, vous attachez un événement click à votre bouton . Dans le bouton cliquez rappel votre $ (this) fera référence à votre bouton et non tr cliqué. Ajoutez plutôt les classes sur lesquelles vous avez cliqué sur tr lui-même.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">Change</button>
.highlighted {
background: red;
}
$('#data tr').click(function(e) {
$('#data tr').removeClass('highlighted');
$(this).addClass('highlighted');
});
Démo 2 et Démo 3 ajoutées. L'une des démos se comporte comme l'a commenté l'OP.
Démo 2: Les Démo 3: Identique à la Démo 2 sauf qu'une seule ligne peut être mise en surbrillance à la fois. Déléguez l'événement click sur l'objet document. Tout clic sur le document (qui est essentiellement la page entière) sera détecté - ce n'est bien sûr pas souhaitable. Déléguer ce qui réagit réellement au clic et ce qui ne fonctionne pas C'est le but du modèle de programmation appelé Délégation d'événement. jQuery fournit un deuxième paramètre facultatif appelé objet Ainsi, l'exemple ci-dessus délègue l'événement de clic exclusivement à tout Plus de détails commentés dans la démo. Cliquez directement sur n'importe quel Cliquez sur le bouton et toutes les classes Cliquez sur le bouton Cliquez sur Le dernier sont sélectionnés par clic puis mis en évidence en cliquant sur le bouton.
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">
Change
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> data dans toute signature de méthode d'événement. Ce paramètre est essentiellement une chaîne de sélection qui spécifie la portée de $(this):tr.highlighted td {
background: red;
} au sein de #data OR final #change . Les clics ailleurs que sur les éléments délégués sont ignorés (sauf s'il existe un autre gestionnaire d'événements de clic sur la ligne). Le dernier paramètre est la fonction de rappel qui sera appelée lorsqu'elle sera déclenchée par un événement de clic sur n'importe quel de #data ou #change . La fonction de rappel utilise $ (this) et des contrôles de flux pour déléguer l'événement de clic et déterminer le comportement (ou le résultat). Dans la démo, c'est essentiellement la méthode .toggleClass () qui permet à .addClass () de cibler (s) sans le .highlighted classe et inversement .removeClass () pour cibler (s) qui a déjà la classe .highlighted . et sa classe parent .highlighted est basculé. .highlighted de tous les sont basculées. Démo 1
ou pour mettre en surbrillance retour
$(document).on('click', '#data td, #change', function(e) {
if ($(this).is('td')) {
$('#data tr').removeClass('selected');
$(this).closest('tr').addClass('selected');
} else {
$('#data tr').removeClass('highlighted');
$('.selected').addClass('highlighted');
}
});
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">
Change
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
tr.highlighted td {
background: red;
}
Démo 2
pour sélectionner / désélectionner puis cliquez sur le bouton pour mettre en surbrillance tous les code sélectionnés >.
$(document).on('click', '#data td, #change', function(e) {
if ($(this).is('td')) {
$(this).closest('tr').toggleClass('selected');
} else {
$('#data tr:not(.selected)').removeClass('highlighted');
$('#data tr.selected').addClass('highlighted');
}
});
<table id="data" border="1" cellspacing="1" width="500">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button type="button" id="change">
Change
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
tr.highlighted td {
background: red;
}
Démo 3
sur lequel vous avez cliqué est sélectionné, puis mis en surbrillance lorsque le bouton est cliqué
/*
Delegate click event on document --
Consider clicks only on #data td or #change
*/
/*
if the clicked tag is a <td>...
get the .closest <tr> from that <td> and add .highlighted
class if it doesn't have it otherwise remove .highlighted
*/
/*
...otherwise get all <tr> and toggle the .highlighted class
*/
$(document).on('click', '#data td, #change', function(e) {
if ($(this).is('td')) {
$(this).closest('tr').toggleClass('highlighted');
} else {
$('#data tr').toggleClass('highlighted');
}
});
`$(document).on("click', '#data td, #change', ...
`$(document).on("click',...`
De rien, @AlulR Si cette réponse résout le problème, n'oubliez pas de cliquer sur la coche pour l'accepter.
voulez-vous que la ligne soit mise en surbrillance lors du clic sur la ligne. ou vous voulez d'abord cliquer sur la ligne, puis sur btn pour la mettre en évidence?
parce que les réponses ici sont pour des scénarios ultérieurs
Je veux d'abord cliquer sur la ligne, puis sur btn pour mettre la ligne en surbrillance. Merci pour votre réponse.