Cliquez sur les lignes de la table pour sélectionner la case à cocher en utilisant jQuery
Que je n'ai pas trouvé question posée avant, sur la façon de bascule case cliquez sur une ligne du tableau, donc, je tiens à partager mon approche...
5 réponses
pour sélectionner la case à cocher d'une rangée à l'intérieur de la table, nous vérifierons d'abord si la case type attribute de l'élément que nous ciblons n'est pas une case à cocher, si ce n'est pas une case à cocher, nous vérifierons toutes les cases à cocher imbriquées à l'intérieur de cette rangée de tableaux.
$(document).ready(function() {
$('.record_table tr').click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
si vous voulez mettre en évidence la ligne de la table sur checkbox checked que nous pouvons utiliser une condition if avec is(":checked") , si oui, que nous trouvons l'élément tr le plus proche en utilisant .closest() et que nous y ajoutons une classe en utilisant addClass()
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) { //If the checkbox is checked
$(this).closest('tr').addClass("highlight_row");
//Add class on checkbox checked
} else {
$(this).closest('tr').removeClass("highlight_row");
//Remove class on checkbox uncheck
}
});
cette question m'a été utile, mais j'ai eu un problème avec la solution précédente. Si vous cliquez sur un lien dans une cellule de tableau, il va déclencher la case à cocher inverser.
J'ai googlé ceci et j'ai vu une proposition pour ajouter un event.stopPropagation() sur les liens de la table, comme ceci:
$('.record_table tr a').click(function(event) {
event.stopPropagation();
});
cette solution était une mauvaise idée parce que j'ai eu quelques jQuery bootstrap popover sur un lien de la table...
voici donc une solution qui me convient mieux. Par le chemin que je suis en utilisant bootstrap 2.3, le point culminant de la ligne est fait en ajoutant la classe "info" au tr.
Pour utiliser ce code, vous avez juste besoin d'ajouter class="selectable" à la balise table.
$(".selectable tbody tr input[type=checkbox]").change(function(e){
if (e.target.checked)
$(this).closest("tr").addClass("info");
else
$(this).closest("tr").removeClass("info");
});
$(".selectable tbody tr").click(function(e){
if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
var cb = $(this).find("input[type=checkbox]");
cb.trigger('click');
}
});
vous voudrez probablement être plus précis avec la condition de test, par exemple si vous avez d'autres entrées dans la rangée.
déclencher un clic comme beaucoup des solutions fournies ci-dessus fera tourner la fonction deux fois. Mettez à jour la valeur prop à la place:
$('tr').click(function(event){
alert('function runs twice');
if(event.target.type !== 'checkbox'){
//$(':checkbox', this).trigger('click');
// Change property instead
$(':checkbox', this).prop('checked', true);
}
});
vous pouvez simplement déclencher cet événement de clic...:)
$(document).ready(function()
{
$("table tr th :checkbox").click(function(event)
{
$('tbody :checkbox').trigger('click');
});
});
ou
$(document).ready(function()
{
$("table tr th :checkbox").on('click',function(event)
{
$('tbody :checkbox').trigger('click');
});
});
même si la réponse acceptée @Mr.Alien fonctionne bien, elle ne fonctionne pas au cas où vous décidez d'ajouter une nouvelle ligne <tr> dynamiquement avec jQuery à un moment donné.
je recommande d'utiliser une approche de délégation d'événement, qui est juste une légère modification de la réponse acceptée.
au lieu de:
...
$('.record_table tr').click(function(event) {
...
utiliser
...
$('.record_table').on('click', 'tr', function(event) {
...
et le même pour la mise en évidence, utiliser:
...
$(".record_table").on('change', "input[type='checkbox']", function (e) {
...
plus d'informations ici: Click event doesn't fire for table rows ajouté dynamiquement