最省納智捷1年新車83萬起新手>新婚族選績優龍頭股 吉隆坡最便宜行程一覽表黃國昌嗆周祝瑛 教室一...
2013-10-06 21:26:15 人氣(253) | 回應(0) | 推薦(0) | 收藏(0) 上一篇 | 下一篇

[Javascript] 縮放表單

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

我要回應
是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼:
請輸入以下數字 (ex:123)

(有*為必填)
詳全文