如何在点击按钮时向html表单添加额外的行？

Question

我试图通过点击添加新添加一个新的行到HTML表单中。我有一些错误。如果点击错误还要查找删除行添加新行。

 <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

起初这个

<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> 

取代你的HTML标记，然后使用该波纹管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> 

然后让我知道结果。 谢谢

Answer 2

没有href标记的末尾，选择是错误的$（“myTable的”）在倒数第二行。

使用这样的

<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> 

编辑使用引号