jquery 動態添加行與增加控制項代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery動態控制項</title>
<script src="jquery-1.4.2.js" type="text/網頁特效"></script>
<script type="text/javascript">
$(function() {
var i = 2;
$('#addtext').click(function() {
if (i < 9) {
$('#main').append('<div><input type="text" name="text" + i + ""/>
　　　　　　　　　　　　　　　　　　　　　　　　<a href="#" class="del-text">del</a></div>');
i++;
} else {
alert("最多隻能添加8個");
}
});
$('.del-text').live('click',function(){
$(this).parent().remove();
i--;
});
});
</script>
</head>
<body>
<div id="main">
<div>
<input type="text" name="text1" />
</div>
</div>
<a id="addtext" href="#">添加文字框</a>
</body>
</html>

看一款jquery動態增加表格

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>download by http://www.111cn.net</title>
    <link href="app_files/css教程/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #tb .td{
            text-align: center;
            font-weight: bold;
            background-color: #6699ff;
            color: #ffffff;
            border:1px solid #000;
        }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //隱藏模板tr
            $("#tb tr").eq(2).hide();
            var i = 0;
            $("#btadd").click(function() {
　　　　　//複製一行
                var tr = $("#tb tr").eq(2).clone();
                tr.find("td").get(0).innerhtml = ++i;
                tr.show();
                tr.appendto("#tb");
            });
            $("#btdel").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    if ($(this).find("#ck").get(0).checked == true) {
                        $(this).remove();
                    }
                });
                i = 0;
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("td").get(0).innerhtml = ++i;
                });
                $("#cka").attr("checked", false);
            });
            $("#cka").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("#ck").get(0).checked = $("#cka").get(0).checked;
                });
            });
        })
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <table id="tb" style="border:1px solid #000;">
           <tr>
                <td colspan="10" style="text-align:right">
                    <input id="btadd" type="button" value="添加" />&nbsp;<input id="btdel" type="button" value="刪除" /></td>
            </tr>
            <tr>
                <td style="width:25px;"></td>
                <td style="width:25px;">
                    <input id="cka" name="cka" type="checkbox"/></td>
                <td style="width:20%;">
                    欄位名</td>
                <td style="width:20%;">
                    名稱</td>
                <td style="width:15%;">
                    資料類型</td>
                <td style="width:40px;">
                    主鍵</td>
                <td style="width:40px;">
                    必填</td>
                <td style="width:20%;">
                    長度</td>
                <td style="width:40px;">
                    有效</td>
                <td style="width:80px;">
                    排序</td>
            </tr>
            <tr>
                <td style="text-align: center"></td>
                <td style="text-align: center">
                    <input id="ck" type="checkbox" name="ck"/></td>
                <td style="text-align: center">
                    <input id="tname" type="text" name="tname" /></td>
                <td style="text-align: center">
                    <input id="trm" type="text" name="trm" /></td>
                <td style="text-align: center">
                    <select id="stype" name="stype" style=" width:100px;">
                        <option>1</option>
                        <option>2</option>
                    </select></td>
                <td style="text-align: center">
                    <input id="ckispr" type="checkbox" name="ckispr"/></td>
                <td style="text-align: center">
                    <input id="ckisnull" type="checkbox" name="ckisnull"/></td>
                <td style="text-align: center">
                    <input id="tlen" type="text" size="10" name="tlen" /></td>
                <td style="text-align: center">
                    <input id="ckisuse" type="checkbox" checked="checked" name="ckisuse"/></td>
                <td style="text-align: center">
                    <input id="txtsortno" type="text" size="4" name="txtsortno" /></td>
            </tr>
        </table>
   
    </div>
    </form>
</body>
</html>