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()      - 在被选元素之前插入内容