Javascript添加刪除行發送表單而不是添加行

-2

任何人都可以用這個腳本來幫助我。爲什麼要提交此表單，而不是在表格中添加新行？如果我刪除了表單標籤和提交按鈕，它可以很好地添加和刪除行。Javascript添加刪除行發送表單而不是添加行

<html> 
     <head> 
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
     <script> 
     document).ready(function() { 
     var id = 0; 
     // Add button functionality 
     $("table.dynatable button.add").click(function() { 
      id++; 
      var master = $(this).parents("table.dynatable"); 

      // Get a new row based on the prototype row 
      var prot = master.find(".prototype").clone(); 
      prot.attr("class", "") 
      prot.find(".id").attr("value", id); 

      master.find("tbody").append(prot); 
     }); 

     // Remove button functionality 
     $("table.dynatable input.remove").live("click", function() { 
      $(this).parents("tr").remove(); 

     }); 
    }); 
    </script> 
    <style> 
     .dynatable { 
      border: solid 1px #000; 
      border-collapse: collapse; 
     } 
     .dynatable th, 
     .dynatable td { 
      border: solid 0px #000; 
      padding: 2px 10px; 
      width: 170px; 
      text-align: center; 
     } 
     .dynatable .prototype { 
      display:none; 
     } 
     </style> 
</head> 
    <body> 
    <FORM name="save_event_personal" method="post" action="fetchrequest.php"> 

    <table class="dynatable"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Start</th> 
       <th>Ende</th> 
       <th><button class="add">Add</button></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="prototype"> 
       <td><input type="text" name="id[]" value="0" class="id" /></td> 
       <td><input type="text" name="name[]" value="" /></td> 
       <td><SELECT name="start[]"> 
       <OPTION value="10:00">10:00</OPTION> 
       <OPTION value="11:00">11:00</OPTION> 
       <OPTION value="12:00">12:00</OPTION> 
       <OPTION value="13:00">13:00</OPTION> 
       <OPTION value="14:00">14:00</OPTION> 
      </SELECT></td> 
       <td><SELECT name="end[]"> 
       <OPTION value="10:00">10:00</OPTION> 
       <OPTION value="11:00">11:00</OPTION> 
       <OPTION value="12:00">12:00</OPTION> 
       <OPTION value="13:00">13:00</OPTION> 
       <OPTION value="14:00">14:00</OPTION> 
      </SELECT</td> 
       <td><input type="image" class="remove" src="delete.png" alt="hi"/> 
      </tr> 

       </table> 
    <BR /><INPUT type="submit" value="Sumbit this form to fetchrequest.php" /> 
     </FORM></body> 
    </html>

來源

2012-12-14 Fabian K

嘗試阻止按鈕，這將是提交表單的默認操作：

$("table.dynatable button.add").click(function(e) { 
    ... 
    e.preventDefault(); 
});

來源

2012-12-14 15:03:51 jbabey

PERFEKT幫我;-) –

默認情況下，在Internet Explorer，一個按鈕是一個「提交按鈕」。您應修改您的按鈕是這樣的：

<th><button type="button" class="add">Add</button></th>

你也可以在你的click回調返回false。

來源

2012-12-14 15:03:55 Magus

<input type="image">

默認提交表單，所以你需要prevent default行爲在點擊：

$("table.dynatable input.remove").live("click", function(e) { 
    e.preventDefault(); 
    $(this).parents("tr").remove(); 
});

，你必須在腳本頂部的錯誤：

document).ready(function() { 
...

應該

$(document).ready(function() { 
...

相同添加行功能：

$("table.dynatable button.add").click(function(e) { 
    e.preventDefault(); 
    ...

來源

2012-12-14 15:05:02 antyrat

謝謝你。對不起，腳本上的錯誤是由於複製和粘貼 –

元素實際上在默認情況下單擊時提交當前表單。

您可以添加type="button"防止這種情況：

<button type="button" class="add">Add</button>

來源

2012-12-14 15:05:26 wazz3r

Javascript添加刪除行發送表單而不是添加行

回答

相關問題