你所在位置:首页Javascript开发 → jquery动态增删行插件

jquery动态增删行插件

发布时间:2019-05-15

[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("<p style='display:none'></p>"); 
            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 
上一篇:构造网站后台,我的EXT+EFS模式(一)
下一篇:Node.js集成开发环境Cloud9搭建及CoffeeScript插件使用