现在的位置: 首页 > 综合 > 正文

jquery动态增删行插件

2012年11月29日 ⁄ 综合 ⁄ 共 2037字 ⁄ 字号 评论关闭
//动态内容区JS  by 尘絮缘 2012 qq:80213876

(function ($) {
    var defaults = {
        container: ".dynamicCon", //最外层的容器class
        temp: ".temp", //模板层class
        items: ".items", //具体行class
        minCount: 1, //具体行的最小数量 
        maxCount: 50, //具体行的最大数量
        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.parent().remove();
            //添加行事件
            $con.find(options.addBtn).live("click", function () {
                if ($con.find(options.items).length == options.maxCount) {
                    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) {
                    alert("最少要有" + options.minCount + "行!"); return false;
                }
                $(this).closest(options.items).remove();
            });
        }
    });
})(jQuery);

 <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 });

抱歉!评论已关闭.