• /
  • Intégration html
  • /
  • Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

<!DOCTYPE html>
<html>
<head>
<title>AJOUTER SUPPRIMER UNE TR DANS UNE TABLE | par NGLESSON </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="AJOUTER SUPPRIMER UNE TR DANS UNE TABLE">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

  <div class="container"> 
    <div class="row mt-5"> 
      <div class="table-responsive mt-2"> 
        <button class="btn btn-md btn-info mb-2 mb-2" id="addrow" type="button"> <i class="fa fa-plus"></i> Ajouter un nouveau </button> 
        <table class="table table-bordered table-hover table-count"> 
          <thead> 
            <tr> 
              <th class="text-center">N° Colone</th> 
              <th class="text-center">Quantité</th> 
              <th class="text-center">Action</th> 
            </tr> 
          </thead> 
          <tbody id="tbody"> 
           <tr id="R1">
              <td class="row-index text-center">1</td>
              <td class="text-center"><select id="inputcountry" name="inputcountry" class="form-control 1_inputcountry"></select></td>
              <td class="text-center"><button class="btn btn-danger btn-sm btn-remove" type="button"><i class="fa fa-trash"></i></button></td>
           </tr>      
           </tbody> 
        </table> 
      </div> 
    </div> 
    </div> 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

                                    
$(document).ready(function () { 
  var rowIdx = 1; 
  var uniq = rowIdx;
  optionList(uniq);
      $('#addrow').on('click', function () {  
        uniq = new Date().getUTCMilliseconds()+''+Math.floor(Math.random() * 100);
        $('#tbody').append('<tr id="R'+ ++rowIdx +'">' 
          +'<td class="row-index text-center"><p>'+rowIdx+'</p></td>' 
          +'<td class="text-center"><select id="inputcountry" name="inputcountry" class="form-control '+uniq+'_inputcountry"></select></td>'
          +'<td class="text-center"><button class="btn btn-danger btn-sm btn-remove" type="button"><i class="fa fa-trash"></i></button></td>'
          +'</tr>'); 
          optionList(uniq);
      }); 
      // jQuery button click event to remove a row. 
      $('#tbody').on('click', '.btn-remove', function () { 
        if($(".table-count #tbody tr").length > 1){
          // Getting all the rows next to the row 
          // containing the clicked button 
          var child = $(this).closest('tr').nextAll(); 
          // Iterating across all the rows  
          // obtained to change the index 
          child.each(function () { 
            // Getting <tr> id. 
            var id = $(this).attr('id'); 
            // Getting the <p> inside the .row-index class. 
            var idx = $(this).children('.row-index').children('p'); 
            // Gets the row number from <tr> id. 
            var dig = parseInt(id.substring(1)); 
            // Modifying row index. 
            idx.html(dig - 1); 
            // Modifying row id. 
            $(this).attr('id', 'R'+dig - 1); 
          }); 
          // Removing the current row. 
          $(this).closest('tr').remove(); 
          // Decreasing total number of rows by 1. 
          rowIdx--; 
        }else{
          alert("You cannot delete first tr");
        }
      }); 
}); 
function optionList(nbr){
  var min = 0,max = 100;
  var elm;
  elm = ""+nbr+"_inputcountry";
  for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    opt.title = i;
    document.getElementsByClassName(elm)[0].appendChild(opt);
  }
}
texte animate css

texte animate css

bootstrap4 tabs

bootstrap4 tabs

Table bootstrap with Datatable

Table bootstrap with Datatable

Login Bootstrap3

Login Bootstrap3

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input range slider HTML style04

Input range slider HTML style04

Compteur avec b4

Compteur avec b4

Cards box with title

Cards box with title

Card 4 Product Style01

Card 4 Product Style01

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter multiple input dynamique

Ajouter multiple input dynamique