• /
  • 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);
  }
}
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

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Bloc resizable with jquery

Bloc resizable with jquery

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Card Bootstrap4 01

Card Bootstrap4 01

Card Bootstrap4 02

Card Bootstrap4 02

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Form Step With B4 Style01

Form Step With B4 Style01

Form login with background image changed style01

Form login with background image changed style01

Texte Block Posts Style01

Texte Block Posts Style01

Titre section avec une anmation style01

Titre section avec une anmation style01

page scroll progress bar

page scroll progress bar