EvoTalk

03 四月, 2009

JQuery Add Table Row and Serialize Example

Posted by: asd In: Web ()

新增按鈕所在表格列,若後台需要用到表單的欄位資料,且是透過ajax方式局部更新的話,就需要用到 serialize function 收集表單輸入欄位的資訊。

HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <HTML>
  4.  
  5. <HEAD>
  6.  
  7. <TITLE> Test JQuery add table row and serial </TITLE>
  8.  
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  10.  
  11. <script type="text/javascript">
  12.  
  13. $(document).ready(function() {
  14. $('#serial').click(function() {
  15. var str = $("form").serialize();
  16. alert(str);
  17. return false;
  18. });
  19. });
  20.  
  21. function addrow(elem)
  22. {
  23. var tr = $(elem).parent().parent();
  24. var table =  $(elem).parents("table:first");
  25. var newRow = tr.clone();
  26. tr.after(newRow);
  27. return false;
  28. }
  29.  
  30. </script>
  31. </HEAD>
  32. <BODY>
  33. <form action="form_action.aspx" method="post">
  34. <table>
  35. <tr>
  36. <td><input type="submit" value="+" onclick="return addrow(this);"/> First name: <input type="text" name="fname" /><br /></td>
  37.  
  38. </tr>
  39.  
  40. </table>
  41.  
  42. <input type="submit" id="serial"/>
  43.  
  44. </form>
  45.  
  46. </HTML>

Tags:

Releated Posts



No Responses to "JQuery Add Table Row and Serialize Example"

Comment Form