• /
  • 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);
  }
}
page scroll progress bar

page scroll progress bar

login page green one

login page green one

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Nav Menu style01

Nav Menu style01

Image hover effects style

Image hover effects style

Image hover Inspiration styles

Image hover Inspiration styles

Image hover 02

Image hover 02

Google Style Login

Google Style Login

Form login with background image changed style01

Form login with background image changed style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table