24h購物| | PChome| 登入
2013-10-06 21:26:15| 人氣3,111| 回應0 | 上一篇 | 下一篇

[Javascript] 縮放表單

推薦 0 收藏 0 轉貼0 訂閱站台



試寫一個點選會將表單收起，另一個則是將表單放出。

其核心在於 JQuery 的 hide(), show() 這兩個函數操作。

至於送出的 ActionEvent 還沒做。




<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#hide").click(function(){
                    $("table").hide(1000);
                });
                $("#show").click(function(){
                    $("table").show(1000);
                });
            });
        </script>
    </head>
    <body>        
        <button id="hide">Hide</button>
        <button id="show">Show</button>
        <form method="get" action="hw1resultShow.php">
            <table width="500" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#000000">
                    <tr>
                        <td bgcolor="#FAFAFA" width="80">E-mail</td>
                        <td colspan="3"><input type="text" name="email"></td>
                    </tr>
                    <tr rowspan="3">
                        <td bgcolor="#FAFAFA" width="80">Comment</td>
                        <td colspan="3"><textarea name="comment"></textarea></td>
                    </tr>
                    <tr>
                        <td bgcolor="#FAFAFA" width="80">password</td>
                        <td width="720"><input type="password" name="pwsd"></td>
                        <td>delete post used.</td>
                    </tr>
                    <tr>
                        <td colspan="3"><input type="submit" value="送出表單" />
                            <input type="reset" value="重置表單" />
                        </td>
                    </tr>
            </table>
        </form>
        <!--
                <p>附加圖檔<input type="file" />(.jpg, .jpeg)</p>
        <fieldset>
        核取方塊為覆選<br />
        <input type="checkbox" value="A" />核取方塊A
        <input type="checkbox" value="B" checked="checked" />核取方塊B
        <input type="checkbox" value="C" />核取方塊C
        <br />
        選項按鈕為單選，相同name的選項會被視為一個group。<br />
        <input type="radio" value="A1" name="A" id="A" />選項按鈕A-1
        <input type="radio" value="A2" name="A" id="A" checked="checked" />選項按鈕A-2
        <input type="radio" value="B1" name="B" id="B" checked="checked" />選項按鈕B-1
        <input type="radio" value="B2" name="B" id="B" />選項按鈕B-2
        </fieldset>
        <fieldset>
        按鈕的效果與button標籤相同。<br />
        <input type="image" src="http://lh5.ggpht.com/_SAlWJ_xow1Y/TEwRvVCHPAI/AAAAAAAABV4/nz6nIc3Tt1E/omew_logo.gif" />
        <input type="submit" value="送出表單" />
        <input type="reset" value="重置表單" />
        <input type="button" value="一般按鈕" />
        </fieldset>
        -->
    </body>
</html>

我要檢舉
台長： Morris

您可能對以下文章有興趣

人氣(3,111) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 教育學習(進修、留學、學術研究、教育概況) | 個人分類: [學習]JavaScript |
此分類下一篇:[Javascript] AJAX 簡易練習
此分類上一篇:[Javascript] Action 定時練習

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文