Comment définir un ID pour chaque ligne d'une colonne

Question

Ceci est l'une des lignes de ma table.

<td> 
    <select id="itemcodeid" name="itemcode[]" class="form-control itemcode"> 
     <option></option> 
     @foreach($productsdata as $d) 
      <option>{{$d->itemcode}}</option> 
     @endforeach 
     </select> 
</td> 

J'utilise Select2 pour remplir des données. Mais quand j'ajoute des lignes à la table, comment référencer les lignes à venir avec l'identifiant. Parce que cela ne fonctionne que sur la première rangée.

Voici l'image de la première rangée. Mais dans les autres lignes je suis incapable de taper et de sélectionner (deuxième image) parce que la référence de l'id n'est pas fait, alors veuillez dire comment référencer l'identifiant des lignes ajoutées. Aide ou suggestion sera très utile. Merci.

Ceci est le code qui est exécuté lorsque j'appuie sur le bouton plus (vérifier l'image).

<script type="text/javascript"> 
    $('.addrow').on('click',function() 
    { addrowfn(); 
    }); 
    function addrowfn() 
    { 
    var tr = '<tr>'+ 
       '<td>'+ 
       '<select id="itemcodeid" name="itemcode[]" class="form-control itemcode">'+ 
       '<option></option>'+ 
       '@foreach($productsdata as $d)'+ 
       '<option>{{$d->itemcode}}</option>'+ 
       '@endforeach'+ 
       '</select>'+ 
       '</td>'+ 
       '<td><input type="text" name="proname[]" class="form-control proname"></td>'+ 
       '<td><input type="text" name="actualprice[]" class="form-control actualprice"></td>'+ 
       '<td><input type="text" name="discount[]" class="form-control discount"></td>'+ 
       '<td><input type="text" name="gst[]" class="form-control gst"></td>'+ 
       '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+ 
       '<td><input type="text" name="finalprorate[]" class="form-control finalprorate"></td>'+ 
       '<td><input type="text" name="finalbillrate[]" class="form-control finalbillrate"></td>'+ 
       '<td>'+ 
       '<a href="#" class="remove btn btn-danger">'+ 
       '<center>'+ 
       '<i class="glyphicon glyphicon-remove"></i>'+ 
       '</center>'+ 
       '</a>'+ 
       '</td>'+ 
       '</tr>'; 
    $('tbody').append(tr);   
    } 
    $('body').on('click','.remove',function() 
    { var l=$('tbody tr').length; 
     console.log(l); 
    if(l==1) 
    { alert('You Cannot Remove all Rows!!!'); 
    } 
    else 
     $(this).parent().parent().remove(); 

    }); 
</script> 

Veuillez me dire s'il y a des corrections.

Answer 1

Je ne sais pas si ce code fonctionne, comme je l'ai pas testé, mais je voudrais, au minimum, faire ces deux changements:

1. Ecoutez le noeud ajouté en utilisant un MutationObserver , puis tournez le select normal dans un select2();

2. Créez une variable pour garder une trace des lignes et rendre dynamique l'ID de chaque sélection, par ex. « Itemcodeid_3 » et « itemcodeid_5 » etc. Faites la même chose pour « nom » attribut

   var target = document.getElementById('<INSERT_ID_HERE>'); 
   var rows = 1; 
   if (target) { 
       var observer = new MutationObserver(function(mutations) { 
        mutations.forEach(function(mutation) { 
         if (mutation && mutation.addedNodes) { 
          mutation.addedNodes.forEach(function(el) { 
           if (el && el.nodeName === "SELECT") { 
            $(el).select2(); 
           } 
          }); 
         } 
        }); 
       }); 
   
       observer.observe(target, { 
        childList: true 
       }); 
   } // end if 
   
   $('.addrow').on('click',function() 
   { 
       addrowfn(); 
   }); 
   function addrowfn() 
   { 
       rows++; 
       var tr = '<tr>'+ 
          '<td>'+ 
          '<select id="itemcodeid_" ' + rows + ' name="itemcode_' + rows + '[]" class="form-control itemcode">'+ 
          '<option></option>'+ 
          '@foreach($productsdata as $d)'+ 
          '<option>{{$d->itemcode}}</option>'+ 
          '@endforeach'+ 
          '</select>'+ 
          '</td>'+ 
          '<td><input type="text" name="proname[]" class="form-control proname"></td>'+ 
          '<td><input type="text" name="actualprice[]" class="form-control actualprice"></td>'+ 
          '<td><input type="text" name="discount[]" class="form-control discount"></td>'+ 
          '<td><input type="text" name="gst[]" class="form-control gst"></td>'+ 
          '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+ 
          '<td><input type="text" name="finalprorate[]" class="form-control finalprorate"></td>'+ 
          '<td><input type="text" name="finalbillrate[]" class="form-control finalbillrate"></td>'+ 
          '<td>'+ 
          '<a href="#" class="remove btn btn-danger">'+ 
          '<center>'+ 
          '<i class="glyphicon glyphicon-remove"></i>'+ 
          '</center>'+ 
          '</a>'+ 
          '</td>'+ 
          '</tr>'; 
       $('tbody').append(tr);   
   } 
   $('body').on('click','.remove',function() 
   { 
       var l=$('tbody tr').length; 
       console.log(l); 
       if(l==1) 
       { 
        alert('You Cannot Remove all Rows!!!'); 
       } 
       else { 
        $(this).parent().parent().remove(); 
       } 
   
   }); 
   

Il peut ne pas fonctionner, car il voit le noeud ajouté en tant que lieu de ... doivent tester

de plus, vous pouvez regarder à l'aide d'un moteur de modèle pour cela, comme John Resig's jQuery solution ou Mustache.js, Handlebars.js