• /
  • Intégration web
  • /
  • 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);
  }
}
creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Vidéo background en html5 style02

Vidéo background en html5 style02

Planète animée style01

Planète animée style01

Input file style01

Input file style01

Drag and drop or upload input file

Drag and drop or upload input file

Css Page grid layout

Css Page grid layout

Create icon animate with svg

Create icon animate with svg

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Calculatrice style01

Calculatrice style01

Buttons Styles Inspirations

Buttons Styles Inspirations

Background div gradient

Background div gradient

Arrows Defense Game

Arrows Defense Game