JSFiddle - React, Tailwind, and code Playground

by zarkoffe

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css">
        <button id="add_article" class="btn btn-success">Ajouter un produit</button>
        <button id="del_article" class="btn btn-danger">Supprimer le(s) produit(s)</button>
        <table class="table table-bordered table-striped table-condensed">
          <thead>
            <tr>
              <th width="2"></th>
              <th width="20">Ref Article</th>
              <th width="20">Désign Article</th>
              <th width="5">Unite</th>        
              <th width="10">Prix Unitaire</th>
              <th width="10">Quantité</th>
              <th width="5">Prix Net Unité</th>
            </tr>
          </thead>
          <tbody id="table_article"> </tbody>
        </table>

        <table id="fantome" style="display:none">   <!-- enlever le display none lors des tests pour vérifier la validité du php  -->
          <tbody>
            <tr>
              <td><input type="checkbox" name="chkbox[]"></td>
              <td>
                <select type="text" class="form-control scope" onchange="toref(this.value)">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  </select></td>

              <td><input type="text" class="form-control"></td>
              <td><input type="text" class="form-control"></td>
              <td><input type="text" class="form-control"></td>
              <td><input type="text" class="form-control"></td>
              <td><input type="text" class="form-control"></td>
            </tr>
          </tbody>
        </table>

JavaScript

// AJOUTER UN ARTICLE DANS LE DEVIS               
    $(document).ready(function()
    {
        var Table_noms_messages = document.getElementById('table_article');
    
          const TR_Base = document.querySelector('#fantome tbody tr');
 
          $('#add_article').click(function () {    // "Ajouter un produit"
            var new_tr_clone = TR_Base.cloneNode(true);
            Table_noms_messages.appendChild( new_tr_clone );
        
            //select 2
            $( new_tr_clone ).find("select.form-control").select2({
              tags: true,
              width: 'resolve'
            });
          });
       
        $('#del_article').click(function() {
            try {
                var rowCount = Table_noms_messages.rows.length;
                for(let i=0; i<rowCount; i++) {
                let
                    ligneT = Table_noms_messages.rows[i],
                    chkbox = ligneT.cells[0].childNodes[0]
                ;
                if(chkbox!=null && chkbox.checked)
                {
                    Table_noms_messages.deleteRow(i);
                    rowCount--;
                    i--;
                }
                }
            }
            catch(e) {
                alert(e);
            }
        });


    });