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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta name="robots" content="all" /> <meta name="BaiduSpider" content="all" /> <meta name="Googlebot" content="all" /> <meta name="revisit-after" content="1 days" /> <style type="text/css"> body { font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; } ul { margin:0; padding:0; list-style:none; } a { margin-left:5px; color:#07F; text-decoration:none; } a:hover { text-decoration:underline; } input { border:1px solid #ccc; margin:2px; } table { border-collapse:collapse; border-spacing:0; } td { margin:0; padding:10px; border:1px solid #ccc; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.EasyInsert-4.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#demo1").easyinsert();//最简单的应用 $("#demo2").easyinsert({ name: ["demo2", "demo2"],//可以同时添加两个（或更多），name值相同也必须分开设置，name数组的长度就是每组input的个数。type、value、maxlength、className四种属性，若同组组员的设置一样，可以只设置一次。 value: ["默认值2-1", "默认值2-2"],//可以给同组input分别设置默认值 maxlength: 15,//每组input的maxlength都一样，无需使用数组 className: ["demo2_class1", "demo2_class2"],//不用我解释了吧 toplimit: 5,//可以添加组数上限（默认是0，表示无上限），它是总管，so，name相当于小组组长 initValue: [//初始化的时候，各input的value就是归它管，必须是数组 ["初始值2-1", "初始值2-2"] ] }); $("#demo3").easyinsert({ name: "demo3", toplimit: 2, initValue: [ ["初始值3-1"],//必须是数组，就算每组只有一个input ["初始值3-2"], ["初始值3-3"]//小三儿，别想蒙混过关，总管只允许添加两组 ] }); $("#demo4").easyinsert({ name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"], type: ["text", "radio", "password", "checkbox", "file", "button"], value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"] }); $("#demo5").easyinsert({//type新增custom和select name: ["demo5", "demo5", "demo5", "demo5"], type: ["custom", "text", "custom", "select"], value: ["<strong style="color:#ff7b0e;">科目：</strong>", "", "<strong style="color:#ff7b0e;">类型：</strong>", { '理论': '1', '技能': '2', '上机': '3' }], initValue: [ ["<strong style="color:#ff7b0e;">科目：</strong>", "初始值5-1", "<strong style="color:#ff7b0e;">类型：</strong>", { '理论a': '1', '技能a': '2', '上机a': '3' }], ["<strong style="color:#ff7b0e;">科目：</strong>", "初始值5-1", "<strong style="color:#ff7b0e;">类型：</strong>", { '理论b': '1', '技能b': '2', '上机b': '3' }] ] }); }); </script> </head> <body> <table width="90%" align="center"> <tr> <td width="10%" align="right"><strong>Demo1</strong></td> <td width="90%"> <ul id="demo1"></ul> <a href="#">+ 添加</a> </td> </tr> <tr> <td align="right"><strong>Demo2</strong></td> <td> <ul id="demo2"></ul> <a href="#">+ 添加（最多5项）</a> </td> </tr> <tr> <td align="right"><strong>Demo3</strong></td> <td> <ul id="demo3"></ul> <a href="#">+ 添加（最多2项）</a> </td> </tr> <tr> <td align="right"><strong>Demo4</strong></td> <td> <ul id="demo4"></ul> <a href="#">+ 添加</a> </td> </tr> <tr> <td align="right"><strong>Demo5</strong> <sup style="color:#F00;">NEW</sup></td> <td> <ul id="demo5"></ul> <a href="#">+ 添加</a> </td> </tr> </table> </body></html>?
效果图：
?
