jquery動態增刪行外掛程式

[javascript]
//動態內容區JS  by 塵絮緣 2012 qq:80213876 
 
(function ($) { 
    var defaults = { 
        container: ".dynamicCon", //最外層的容器class 
        temp: ".temp", //模板層class 
        items: ".items", //具體行class 
        minCount: 1, //具體行的最小數量  （初始始化時有個隱藏的模板行，在具體算的時候需要+1） 
        maxCount: 50, //具體行的最大數量（初始始化時有個隱藏的模板行，在具體算的時候需要+1） 
        addBtn: ".addBtn", //添加按鈕class 
        delBtn: ".delBtn"//刪除按鈕class 
    } 
    $.extend({ 
        DynamicCon: function (options) { 
            options = $.extend(defaults, options); 
            $con = $(options.container); 
            $temp = $con.find(options.temp); //模板行 
            $temp.attr({ "class": options.items.substring(1, options.items.length) }).wrap("<div style='display:none'></div>"); 
            var tempHtml = escape($temp.parent().html()); 
            $temp.hide(); 
            //添加行事件 
            $con.find(options.addBtn).live("click", function () { 
                if ($con.find(options.items).length == options.maxCount + 1) { 
                    alert("最多隻能添加" + options.maxCount + "行！"); return false; 
                } 
                $(this).closest(options.items).after(unescape(tempHtml)); 
            }); 
            //刪除行事件 
            $con.find(options.delBtn).live("click", function () { 
                if ($con.find(options.items).length == options.minCount + 1) { 
                    alert("最少要有" + options.minCount + "行！"); return false; 
                } 
                $(this).closest(options.items).remove(); 
            }); 
        } 
    }); 
})(jQuery); 

Demo:
[html]
<table style="width:100%;border:solid 1px #78b0dc;" class="dynamicCon"> 
    <tr> 
        <td colspan="3" align="left" style="color:#f00;"> 
            註：欄位名只能為漢字或數字或字母或底線組成的字串；權重只能為非負數！ 欄位名為空白時，將不進行添加！權重為空白時預設為0。簡易版無需填寫權重資訊！！ 
        </td> 
    </tr> 
    <tr> 
        <td align="center" width="40%">欄位名</td> 
        <td align="center" width="40%" class="trNoSimple">權重（單個積分）</td> 
        <td align="center" width="20%">操作</td> 
    </tr> 
            <tr class="items"> 
                <td align="center"> 
                    <input type="text" name="txtFieldName" value="<%#Eval("FieldRealName")%>"/> 
                    <input type="hidden" name="txtFieldId" value="<%#Eval("Id")%>"/> 
                </td> 
                <td class="trNoSimple"> 
                    <input type="text" name="txtFieldPoint" value="<%#Eval("Point")%>"/> 
                </td> 
                <td align="center"><a href="javascript:void(0);" class="addBtn">添加</a>    <a href="javascript:void(0);" class="delBtn">刪除</a></td> 
            </tr> 
    <tr class="temp"> 
        <td align="center"><input type="text" name="txtFieldName"/></td> 
        <td class="trNoSimple"><input type="text" name="txtFieldPoint" value="0"/></td> 
        <td align="center"><a href="javascript:void(0);" class="addBtn">添加</a>    <a href="javascript:void(0);" class="delBtn">刪除</a></td> 
    </tr> 
</table> 

$.DynamicCon({ maxCount: 25 }); 

摘自  塵絮緣——BLOG