J'ai ce code Ajax / Jquery qui crée une table dynamique avec des lignes basées sur des données extraites de la base de données. Lors de la création du tableau, les boutons sont également créés dynamiquement pour chaque ligne. En plus de ce qui précède, je voudrais pouvoir appeler une fonction pour ces boutons. Par exemple, si le premier bouton de ligne de table a un identifiant de 0, cliquer sur le bouton avec l'identifiant 0 appellera une fonction qui prendrait l'identifiant de la première ligne et exécutera une fonction de suppression de base de données. Comment puis-je atteindre cet objectif?

Voici mon code où la table est créée dynamiquement:

success: function(controller_data)
              {     JSON.stringify(controller_data);

                        var tr;
                        for (var i = 0; i < controller_data.length; i++) {

                            tr = $('<tr/>');
                  tr.append("<td><input name = \"radios\" value = tablebutton"+i+" id=tablebutton"+i+" type=\"button\"></td>");
                            tr.append("<td>" + controller_data[i].id + "</td>");
                            tr.append("<td>" + controller_data[i].question + "</td>");
                            tr.append("<td>" + controller_data[i].image + "</td>");
                            tr.append("<td>" + controller_data[i].answer1 + "</td>");
                            tr.append("<td>" + controller_data[i].answer2 + "</td>");
                            tr.append("<td>" + controller_data[i].answer3 + "</td>");
                            tr.append("<td>" + controller_data[i].answer4 + "</td>");
                            $('table').append(tr);
                              }
              }

enter image description here

2
user3810730 2 janv. 2016 à 15:57

2 réponses

Meilleure réponse

Vous devez utiliser la délégation d'événements on () puisque vous traitez avec de nouveaux DOM ajoutés dynamiquement à la page, par exemple:

$('body').on('click', 'input[id^="tablebutton"]', function(){
     //Call your function
})

Essayez d'ajouter class pour identifier td qui contiennent l'ID de ligne, par exemple:

tr.append("<td class='row-id'>" + controller_data[i].id + "</td>");

Code complet:

$(function(){ //Ready function
     $('body').on('click', 'input[id^="tablebutton"]', function(){
         var row_id = $(this).parents('tr').find('.row-id').text(); //get the id
         myFunction(row_id);
     })
})

J'espère que cela t'aides.

0
Zakaria Acharki 2 janv. 2016 à 14:27

Ce serait le gestionnaire d'événements délégué inscrit sur le prochain nœud parent approprié qui serait le <table> (à mon humble avis)

$("table").on("click", "input.delete", function() {
    var rowId = $(this).val();

    // delete row in backend...
});

Mais cela ne fonctionnera qu'avec le gestionnaire success restructuré ci-dessous:

success : function (controller_data) {
    var rows = [];

    for (var i = 0; i < controller_data.length; i++) {
        rows.push('<tr>'
                    + '<td><input class="delete" name="radios" value="' + i + '" type="button"></td>'
                    + '<td>' + controller_data[i].id + '</td>'
                    + '<td>' + controller_data[i].question + '</td>'
                    + '<td>' + controller_data[i].image + '</td>'
                    + '<td>' + controller_data[i].answer1 + '</td>'
                    + '<td>' + controller_data[i].answer2 + '</td>'
                    + '<td>' + controller_data[i].answer3 + '</td>'
                    + '<td>' + controller_data[i].answer4 + '</td>'
                + '</tr>';
    }

    $("table").append(rows.join(""));
}

J'ai supprimé l'appel inutile JSON.stringify(...) et modifié un peu la boucle for pour ne changer le DOM qu'une fois par requête au lieu d'une fois par ligne.
J'ai également ajouté la classe delete au <input /> pour un sélecteur plus descriptif.
Et le dernier mais non le moindre, le value est désormais l'id uniquement au lieu de tablebutton<id>.

0
Andreas 2 janv. 2016 à 13:34