J'ai ce tableau dans ma page que je récupère en utilisant la demande AJAX.

<table>
    <tbody>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Example Name 1</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="2">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Example Name 2</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="1">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

J'essaie donc d'obtenir la valeur d'ancrage lorsque le bouton est cliqué. Je fais donc une fonction comme celle-ci:

function deleteParticipantFunction(){
    var result = confirm('You are about to delete this participant. Continue?');
    if(result){
        var participant_id = $(this).val();
        console.log(participant_id);
    }
};

Mais je ne peux pas obtenir la valeur. Quelle est la bonne façon de récupérer la valeur dans la fonction?

0
Leon 12 avril 2018 à 13:17

3 réponses

Meilleure réponse

Passez id directement à la méthode:

<a href="javascript:;" onclick="deleteParticipantFunction(1)" class="delete-participant">

Alors vos méthodes js seront plus simples:

function deleteParticipantFunction(participant_id){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
    //delete smth by id
}
};
1
bigwolk 12 avril 2018 à 10:23

Les éléments d'ancrage n'ont pas d'attribut value. C'est quelque chose que l'on trouve sur les entrées de formulaire. Au lieu de cela, vous pouvez placer la valeur dans un attribut data-*:

<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" data-participant="1">
    Delete
</a>

Et récupérez-le dans la fonction data():

var participant_id = $(this).data('participant');

Cependant, en y réfléchissant, quand on appelle la fonction comme ça, est this même le contexte correct? Je suppose que je n'ai pas eu à essayer ça depuis un moment donc je ne sais pas du haut de ma tête. Mais heureusement, vous utilisez déjà jQuery, alors pourquoi ne pas simplement utiliser jQuery? Plutôt que de placer l'appel de fonction sur chaque élément d'un attribut onclick, utilisez jQuery pour lier une fonction aux événements de clic:

<a href="javascript:;" class="delete-participant" data-participant="1">
    Delete
</a>

Et:

$(document).on('click', '.delete-participant.', function () {
    var result = confirm('You are about to delete this participant. Continue?');
    if(result){
        var participant_id = $(this).data('participant');
        console.log(participant_id);
    }
});

Ce qui a l'avantage supplémentaire de désencombrer votre balisage.

1
David 12 avril 2018 à 10:32
function deleteParticipantFunction(e){
    var result = confirm('You are about to delete this participant. Continue?');
    if(result){
        var participant_id = this;
        console.log(e.value);
        //e.parentNode.parentNode.parentNode.remove()
    }
};
<table>
    <tbody>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Example Name 1</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="2">
                        Delete
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Example Name 2</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="1">
                        Delete
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
1
ashwintastic 12 avril 2018 à 11:30