Question

我想以表格形式向表中动态添加和删除行。附加tr的jquery被应用。但是，当我添加或删除行时，无需单击提交按钮即可提交表单。这是我的代码。

 <html>
  <head>
   <script type="text/javascript" src="jquery.min.js"></script>
   <script>
    $(document).ready(function(){
    $('#add').click(function(){
      i=1;
        var row="<tr><td><input type='checkbox' />";
          row+="</td><td><input type='text' name='bundle[]' id='bnd"+i+"' /></td>";
          row+="<td><input type='number' name='scripts[]' id='script"+i+"' min='1' /></td></tr>";
       i++;
       $('#bundle').append(row);
   });
   $('#remove').click(function(){
     $("#bundle input:checkbox:checked").closest('tr').remove(); 
    });  

 });
  </script>
<style>
td
{
    padding-left:8px;
    height:30px;
}
input[type=number]
{
  width:60px;
}
</style>
</head>
  <body>
     <div id="details">
       <form method="post" action="test1.php" id="form">

       &nbsp&nbsp<button id="add">+Add</button>&nbsp&nbsp&nbsp <button id="remove">- Remove</button>
   <table id="bundle">
      <tr><td width='30px'></td><td width="200px">Bundle No.</td><td>No. of scripts</td></tr>
     <tr><td><input type='checkbox' /></td>
       <td><input type='text' name='bundle[]' /></td>
       <td><input type='number' name='scripts[]'  min='1' /></td>
      </tr>
   </table>

   <br>
     <center><input type="submit" id="submit" value="submit" /></center>
     <br>
   </form>
   </div> 
 </body>
</html>

Answer 1

为了在单击按钮时不提交，需要添加type="button"。
请查看以下答案：How to prevent buttons from submitting forms

因此，请尝试添加  <button type="button" id="add">+Add</button>     <button type="button" id="remove">- Remove</button>，如下所示。您可以以此触发点击事件。

Object.finalize

动态添加和删除行以使表单提交

1 个答案: