JQuery兑现插入行 _Web前端

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>
效果图：
1 楼 yaokangchen 2010-05-24
谢谢,写得很好.