0
votes

jQuery Ne pas ajouter sur la table si la valeur spécifique existe déjà

Mon code fonctionne parfaitement mais ma seule préoccupation est de savoir comment puis-je valider si la valeur ajoutée existe déjà sur la table. C'est ce que j'ai fait.

    $(document).ready(function(){
    var i = 0;  
    $(".add-row").click(function(){
        i++;
        var name = $("#name").val();
        var markup = '<tr id="row'+i+'"> <td> <button type="button" name="remove" id="'+i+'" class="btn_remove">Delete </button> </td> <td> <input type="text" value="'+name+'" name="owners"> '+name+'</td> </tr>';
        if(name != '-') {
            if ($('#dynamic_field').has(name)) {
                alert('already exists in the table');
            } else {
                $('#dynamic_field').append(markup);
            }
        }
    });
    $(document).on('click', '.btn_remove', function(){  
     var button_id = $(this).attr("id");   
     $('#row'+button_id+'').remove();  
 });  
});

Ma préoccupation ne concerne que le if ($ ('# dynamic_field'). Has (name)) partie. Je veux valider s'il existe déjà.

<body>
<form>
    <select id="name">
        <option value="-">-</option>
        <option value="Mark">Mark</option>
        <option value="James">James</option>
        <option value="Steve">Steve</option>
    </select>
    <input type="button" class="add-row" value="Add Row">
</form>
<table id="dynamic_field"></table>

jquery

1 commentaires

vous pouvez essayer d'utiliser $ ('# dynamic_field'). find (": input [value =" + name + "]"). length

3 Réponses :

0
votes

Il vous suffit d'utiliser le sélecteur pour récupérer une valeur existante dans une table.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <select id="name">
        <option value="-">-</option>
        <option value="Mark">Mark</option>
        <option value="James">James</option>
        <option value="Steve">Steve</option>
    </select>
    <input type="button" class="add-row" value="Add Row">
</form>
<table id="dynamic_field"></table>

 $(document).ready(function(){
    var i = 0;  
    $(".add-row").click(function(){
        i++;
        var name = $("#name").val();
        var markup = '<tr id="row'+i+'"> <td> <button type="button" name="remove" id="'+i+'" class="btn_remove">Delete </button> </td> <td> <input type="text" value="'+name+'" name="owners"> '+name+'</td> </tr>';
        if(name != '-') {
            var isExists=false;
            $("#dynamic_field tr input").each(function(){
              var val=$(this).val();
              if(val==name)
                isExists=true;
            }).val()
            if (isExists) {
                alert('already exists in the table');
            } else {
                $('#dynamic_field').append(markup);
            }
        }
    });
    $(document).on('click', '.btn_remove', function(){  
     var button_id = $(this).attr("id");   
     $('#row'+button_id+'').remove();  
 });  
});

0 commentaires

0
votes

.has () renvoie l'élément jquery, vous devez donc vérifier la longueur et puisque le nom est variable et non un sélecteur, vous devez donc y associer l'attribut value.

if( $('#dynamic_field').has(":input[value="+name+"]").length ) {
   alert('already exists in the table');
}

0 commentaires

0
votes

Si cela ne vous dérange pas d'utiliser un peu de JS vanilla, vous pouvez profiter de la méthode (relativement nouvelle) querySelectorAll qui prend une chaîne de sélection similaire à celle de jQuery, et est un peu plus rapide depuis , eh bien, c'est du simple JS.

Puisque vous nommez les entrées, vous pouvez aussi bien utiliser leur attribut name pour les sélectionner:

'#dynamic_field input [name = owner]' sélectionne les entrées
document.querySelectorAll ('# dynamic_field input [name = owner]') renvoie une liste de nœuds
Array.from (document.querySelectorAll ('# dynamic_field input [name = owner]')) convertit ladite liste de nœuds en un tableau afin que nous puissions utiliser some () dessus
Array.from (document.querySelectorAll ('# dynamic_field input [name = owner]')). some (input => input.value === name); renvoie true s'il y a au moins un élément qui satisfait à la condition input.value === name .

querySelectorAll p>

Array.from a>

certains

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <select id="name">
        <option value="-">-</option>
        <option value="Mark">Mark</option>
        <option value="James">James</option>
        <option value="Steve">Steve</option>
    </select>
    <input type="button" class="add-row" value="Add Row">
</form>
<table id="dynamic_field"></table>

$(document).ready(function(){
    var i = 0;  
    $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = '<tr id="row'+i+'"> <td> <button type="button" name="remove" id="'+i+'" class="btn_remove">Delete </button> </td> <td> <input type="text" value="'+name+'" name="owners"> '+name+'</td> </tr>';
    
        if(name !== '-'){
          const exists = Array.from(
                             document.querySelectorAll(
                                 '#dynamic_field input[name=owners]'
                             )).some(input => input.value === name);
          
          if (exists) {
              alert('already exists in the table');
          } else {
            i++;
            $('#dynamic_field').append(markup);
          }
        }     
    });
    
    $(document).on('click', '.btn_remove', function(){  
     var button_id = $(this).attr("id");   
     $('#row'+button_id+'').remove();  
 });  
});

0 commentaires