Jquery 動態追加控件並獲取值

　　先展示通過動態添加控件的結果：

 

　　實現步驟：

1.引用js文件  <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script>  

2.引用BootStrap（純屬為了控件好看） <link href="css/bootstrap.css" rel="stylesheet" />

3.畫一個Table控件用於存放按鈕 控件

　　  <table id="tabConten" cellpadding="10" cellspacing="0">  
            <tr> 
                <td  style=" border-left-width:0px;" colspan="5" >  
                    <input type="button" value="添加人員" style="margin-right:0px;" onclick="add()" class="btn btn-info"/>
                    <input id="btn_save" type="button" value="查看" class="btn btn-success" onclick="query()"/>
                </td>
            </tr> 
            <tr class="addPersonTh">
                    <td class="tdFontW tdCos_01"><span style="color: #F00" class="tdAlignL">*</span>&nbsp;姓名</td>
                    <td class="tdFontW tdCos_02"><span style="color: #F00" class="tdAlignL">*</span>&nbsp;性別</td>
                    <td class="tdFontW tdCos_03"><span style="color: #F00" class="tdAlignL">*</span>&nbsp;手機</td>
                    <td class="tdFontW tdCos_04"><span style="color: #F00" class="tdAlignL">*</span>&nbsp;郵箱</td>
                    <td class="tdFontW tdCos_05">操作</td>
            </tr>  
            <tr class="addPerson">
                <td>
                    <span class="span_none">A: &nbsp;&nbsp; </span>
                    <input type="text" maxlength="10" /> 
                </td>
                <td>
                    <select class="sex_style">
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select> 
                </td>
                <td><input type="text" maxlength="11" /></td>
                <td><input type="text" maxlength="50" /></td>
                <td><a href="#" class="del">刪除</a></td>
            </tr> 
        </table>

4.設置布局樣式

     <style type="text/css"> 
        #index                          /* 全局樣式 */
        {
            margin:0 auto;
            padding:0 auto;
            width:900px;
            /*border:1px solid red;*/
            font-size:15px;
        }
        #tabConten{                     /* 表格樣式 */
            margin:0 auto;
            border-collapse: collapse;
            text-align:center;
        }
        #tabConten tr td{               /* 表格內td設置 */
            border:0px solid gray;
        }
         .sex_style      /* 設置性別下拉框樣式 */
        {
            width:70px;    
        }
    </style>

5.編寫js腳本
<script type="text/javascript">        /* 增加tr行 */ 
        var num = 1;        //全局變量 默認為一組控件
        function add() {                    /* 增加人員行 */ 
            num++;
            var str = String.fromCharCode(64 + num);        
            var $tr = $("<tr class=\"addPerson\"><td><span class=\"span_none\"> " + str + ": &nbsp;&nbsp; </span><input type=\"text\"  maxlength=\"10\"/></td><td><select class=\"sex_style\" ><option value=\"1\">男</option><option value=\"0\">女</option></select></td><td><input type=\"text\" maxlength=\"11\" /></td><td><input type=\"text\"  maxlength=\"50\"/></td><td><a href=\"#\" class=\"del\">刪除</a></td></tr>");
            var $parent;
            if (num == 1) {
                $parent = $("table tr:.addPersonTh");   //num默認為1 如果當前沒元素就在標題后添加
            } else {
                $parent = $("table tr:.addPerson:eq(" + (num - 2) + ")");   //num默認為1 進入add事件首先將num+1，所以此處要獲取在哪里添加元素需-2
            } 
            $parent.after($tr);                     
            init();
        }
        function query() {          /* 獲取人員行 */  
            for (var i = 0; i < num; i++) {
                for (var j = 0; j < 4; j++) {
                    if (j == 1) {
                        alert("第"+(i+1)+"行第"+(j+1)+"的值是："+$("table tr:.addPerson:eq(" + i + ") td:eq(" + j + ") select:.sex_style option:selected").val());
                    } 
                    else {
                        alert("第"+(i+1)+"行第"+(j+1)+"的值是："+$("table tr:.addPerson:eq(" + i + ") td:eq(" + j + ") :text").val());
                    }
                } 
            } 
        }
        function init() {           /* 刪除人員行 */
            $("table tr td a.del").unbind("click").click(function () {  
                $(this).parent().parent().remove();
                for (var i = 0; i < num - 1; i++) {
                    var str = String.fromCharCode(65 + i) + ":";
                    $("table tr:.addPerson:eq(" + i + ") span").html(str);
                }
                num--; 
            });
        }
    </script>

　　其中追加的位置可分為四種，根據實際需求使用。

append()      - 在被選元素的結尾插入內容
prepend()     - 在被選元素的開頭插入內容
after()       - 在被選元素之后插入內容
before()      - 在被選元素之前插入內容