EvoTalk » JQuery http://evotalk.net/blog Mon, 07 Jun 2010 03:01:06 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 JQuery Add Table Row and Serialize Example http://evotalk.net/blog/2009/04/jquery-add-table-row-and-serialize-example.html http://evotalk.net/blog/2009/04/jquery-add-table-row-and-serialize-example.html#comments Fri, 03 Apr 2009 03:36:45 +0000 asd http://evotalk.net/blog/?p=1226 新增按鈕所在表格列，若後台需要用到表單的欄位資料，且是透過ajax方式局部更新的話，就需要用到 serialize function 收集表單輸入欄位的資訊。

view plain
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>

]]> http://evotalk.net/blog/2009/04/jquery-add-table-row-and-serialize-example.html/feed 0 Use JQuery to Add Last Row in Table http://evotalk.net/blog/2009/02/use-jquery-to-add-last-row-in-table.html http://evotalk.net/blog/2009/02/use-jquery-to-add-last-row-in-table.html#comments Wed, 25 Feb 2009 13:10:43 +0000 asd http://evotalk.net/blog/?p=1202 在表格中動態新增一個 row
view plain
HTML:
  1. </span>
  2. &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&gt;
  3. &lt;html xmlns=http://www.w3.org/1999/xhtml"&gt;
  4. &lt;head&gt;
  5. &lt;style type="text/css"&gt;
  6. .current-row
  7. {
  8. background-color: Maroon;
  9. }
  10. &lt;/style&gt;
  11. &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  12. &lt;title&gt;Add a new row&lt;/title&gt;
  13. &lt;script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"&gt;
  14. &lt;script type="text/javascript"&gt;
  15. function add() {
  16. // Get the current row
  17. var lastRow = $('#tb1 tr:last');
  18. var number = parseInt($("td:first", lastRow)[0].innerHTML);
  19. number++;
  20. var newRow = lastRow.clone();
  21. $("td:first", newRow).html(number);
  22. $('#tb1').append(newRow);
  23. // Clear the content of the last table cell
  24. //$("td:last", newRow).html("");
  25. return false;
  26. }
  27. &lt;/script&gt;
  28. &lt;/head&gt;
  29. &lt;body&gt;
  30. &lt;input type="button" value="+" onclick="add();"&gt;
  31. &lt;table border="1" class="style11" id="tb1"&gt;
  32. &lt;tr&gt;
  33. &lt;td class="style12"&gt;
  34. 項次&lt;/td&gt;
  35. &lt;td class="style12"&gt;
  36. 活動(或課程）名稱&lt;/td&gt;
  37. &lt;td class="style12"&gt;
  38. 辦理單位&lt;/td&gt;
  39. &lt;td class="style12"&gt;
  40. 辦理日期&lt;/td&gt;
  41. &lt;td class="style12"&gt;
  42. 參加教師(不含&lt;br /&gt;
  43. 職員)人次&lt;/td&gt;
  44. &lt;/tr&gt;
  45. &lt;tr id="row1"&gt;
  46. &lt;td id="num"&gt;
  47. 1&lt;/td&gt;
  48. &lt;td&gt;
  49. &lt;input type="textbox" ID="TextBox9"  Width="100%"&gt;
  50. &lt;/td&gt;
  51. &lt;td&gt;
  52. &lt;input type="textbox" ID="TextBox10"  Width="100%"&gt;
  53. &lt;/td&gt;
  54. &lt;td&gt;
  55. &lt;input type="textbox" ID="TextBox11"  Width="100%"&gt;
  56. &lt;/td&gt;
  57. &lt;td&gt;
  58. &lt;input type="textbox" ID="TextBox12"  Width="100%"&gt;
  59. &lt;/td&gt;
  60. &lt;/tr&gt;
  61. &lt;/table&gt;
  62. &lt;/body&gt;
  63. &lt;/html&gt;

]]> http://evotalk.net/blog/2009/02/use-jquery-to-add-last-row-in-table.html/feed 0