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


  • BK: 大於和小於在今日更廣泛地使用於標籤上,故在此補充該英文用法: : angle bracket []: square bracket
  • luh1688: 非常實用且謝謝!~
  • asd: 好的,不過很久沒修改了,不知道能不能動 寄到您的yahoo信箱
  • LIANG: nice post, thank you
  • Justmaker: 您好,請問可以跟你要source嗎?我最近有在看股票,想要enhance您的小工具,不知是否可以開放?

Category