Question

我正在尝试通过单击add new将新行添加到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

首先用这个

替换你的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>  </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>

然后使用下面的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>

然后让我知道结果。感谢

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

1 个答案: