• /
  • 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 une legende dans un formulaire

Ajouter une legende dans un formulaire

Buttons Styles Inspirations

Buttons Styles Inspirations

Card Profile Style01

Card Profile Style01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Form login et créer un compte style01

Form login et créer un compte style01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Image hover 06

Image hover 06

Input range slider HTML style04

Input range slider HTML style04

Timeline style03

Timeline style03

bootstrap4 tabs

bootstrap4 tabs

toggle switch style01

toggle switch style01