2012年3月20日 星期二

{JQuery} 動態新增控制項

    <script src="Jscript/JQuery_UI/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Jscript/JQuery_UI/js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
    <script src="Jscript/JQuery_UI/js/jquery.ui.datepicker-zh-TW.js" type="text/javascript"></script>
    <link href="Jscript/JQuery_UI/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet"      type="text/css" />
Script部分:

 <script>
        $(function () {
        $("#Button2").click( addTextbox);
        });

        function addTextbox() {
            var cobject = document.getElementById("Count");
            var c = cobject.value;
            var box = "<input type='text' id ='text" + c + "' name='text" + c + "' value='text" + c + "'/><br/>";
            $("#TextValueDiv> input:text:last").each(function () {
                $(this).next().after($(box));
            });
            var count = Number(c) + 1;
            cobject.value = count;
        }
</script>


form部分:
<div id="ConentDiv">
    <input type="button" id ="Button2" value="new"/>
    <input type="hidden" id="Count" name="Count" value="2" />
    </div>
    <div id="TextValueDiv"> 
     <input type="text" id="text1" name="text1" /><br />  
</div>

執行方式:當按下New按鈕,則新增一個新的Textbox,並放置於最後一個TextBox之後