//动态内容区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 });