Comment ajouter une ligne supplémentaire dans un formulaire HTML lors d'un clic sur un bouton?

Question

J'essaie d'ajouter une nouvelle ligne dans un formulaire HTML en cliquant sur ajouter nouveau. J'ai eu une erreur. Et également à la recherche de supprimer la ligne si vous avez cliqué par erreur sur ajouter nouveau.

 <table id='myTable'> 
      <tr> 
      <th>Proposer</th> 
      <th>Institution</th> 
      <th>E-mail</th> 
      <th>You will be present <br>(Y/N)</th></tr> 

      <tr> 
      <td><input type="text" name="proposer" size="20"><span 
class="text-danger"><?php echo $proposerError; ?></span> &nbsp;</td> 
       <td><input type="text" name="institute" size="30"><span 
class="text-danger"><?php echo $instituteError; ?></span> &nbsp;</td> 
      <td> <input type="text" name="email" size="15"> <span 
class="text-danger"><?php echo $emailError; ?></span> &nbsp;</td> 
      <td><input type="text" name="present" size="4"><span 
class="text-danger"><?php echo $presentError; ?></span></td> 
     </tr> 




    <a href=" onclick='$("<tr><td><input type="text" name="proposer2" size="20" /></td> 
            <td><input type="text" name="intitute2" size="30"/></td> 
            <td><input type="text" name="email2" size="15"/></td> 
            <td><input type="text" name="present2" size="4"/></td> 
           </tr>").appendTo($("myTable")); return false;'>Add new</a> 

      </table> 

Answer 1

Tout d'abord remplacer le balisage HTML avec ce

<table id='myTable'> 
      <tr> 
      <th>Proposer</th> 
      <th>Institution</th> 
      <th>E-mail</th> 
      <th>You will be present <br>(Y/N)</th></tr> 

      <tr> 
      <td><input type="text" name="proposer" size="20"><span 
class="text-danger"><?php echo $proposerError; ?></span>  </td> 
       <td><input type="text" name="institute" size="30"><span 
class="text-danger"><?php echo $instituteError; ?></span>  </td> 
      <td> <input type="text" name="email" size="15"> <span 
class="text-danger"><?php echo $emailError; ?></span>  </td> 
      <td><input type="text" name="present" size="4"><span 
class="text-danger"><?php echo $presentError; ?></span></td> 
     </tr> 


      </table> 
<a href="#" class="add-more">Add More</a> 

Utilisez ensuite ce ci-dessous le code jQuery

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery('.add-more').click(function(event){ 
     event.preventDefault(); 
     jQuery('#myTable').append('<tr><td><input type="text" name="proposer2" size="20" /></td><td><input type="text" name="intitute2" size="30"/></td><td><input type="text" name="email2" size="15"/></td><td><input type="text" name="present2" size="4"/></td></tr>'); 
    }); 
}); 
</script> 

Alors laissez-moi savoir le résultat. Merci

Answer 2

Il n'y a pas de fin de balise href, le sélecteur est erroné $ ("myTable") dans la deuxième dernière ligne.

utilisation comme

<a href="#" onclick='$("<tr><td><input type=\"text\" name=\"proposer2\" size=\"20\" /></td> 
           <td><input type=\"text\" name=\"intitute2\" size=\"30\"/></td> 
           <td><input type=\"text\" name=\"email2\" size=\"15\"/></td> 
           <td><input type=\"text\" name=\"present2\" size=\"4\"/></td> 
          </tr>).appendTo($("#myTable")); return false;'>Add new</a> 

modifié pour utiliser des citations