js 动态添加input、select等表单元素代码

<!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>
<title>动态添加input、select等表单元素的效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css教程">
body{font:12px/1.5 tahoma,arial,b8bf53,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-collaps教程e:collapse;border-spacing:0;}
td{margin:0;padding:10px;border:1px solid #ccc;}
</style>
<script type="text/网页特效" src="http://www.111cn.net/jquery-1.4.1.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' }]
  ]
});
});
/**
* easyinsert 4.0
* http://ilikejquery.com/easyinsert
*
* @creator   wo_is神仙 <jsw0528@mrzhang.net>
* @depend    jquery 1.4+
**/
;(function($){
$.fn.extend({
  "easyinsert": function(o){
   o = $.extend({
    //触发器
    clicker: null,//根据class（或id）选择，默认.next()获取
    //父标签
    wrap: "li",
    name: "i-text",
    type: "text",
    value: "",
    maxlength: 20,
    classname: "i-text",
    //新增上限值
    toplimit: 0,//0表示不限制
    //初始化值，二维数组
    initvalue: null//用于修改某资料时显示已有的数据
   }, o || {});
   var oo = {
    remove: "<a href="#nogo" class="remove">移除</a>",
    error1: "参数配置错误，数组的长度不一致，请检查。",
    error2: "参数配置错误，每组初始化值都必须是数组，请检查。"
   }
   //容器
   var $container = $(this);
   var allowed = true;
   //把属性拼成数组（这步不知道是否可以优化？）
   var arrcfg = new array(o.name, o.type, o.value, o.maxlength, o.classname);
   //arr ==> [name, type, value, maxlength, classname]
   var arr = new array();
   $.each(arrcfg, function(i, n){
    if ( $.isarray(n) ) {
     arr[i] = n;
    } else {
     arr[i] = new array();
     if ( i === 0 ) {
      arr[0].push(n);
     }else{
      //补全各属性数组（根据name数组长度）
      $.each(arr[0], function() {
       arr[i].push(n);
      });
     }
    }
    //判断各属性数组的长度是否一致
    if ( arr[i].length !== arr[0].length ) {
     allowed = false;
     $container.text(oo.error1);
    }
   });
   if ( allowed ) {
    //获取触发器
    var $clicker = !o.clicker ? $container.next() : $(o.clicker);
    $clicker.bind("click", function() {
     //未添加前的组数
     var len = $container.children(o.wrap).length;
     //定义一个变量，判断是否已经达到上限
     var ismax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true);
     if ( !ismax ) {//没有达到上限才允许添加
      var $item = $("<"+ o.wrap +">").appendto( $container );
      $.each(arr[0], function(i) {
       switch ( arr[1][i] ) {
        case "select"://下拉框
         var option = "";
         $.each(arr[2][i], function(i, n) {
          option += "<option value='"+ n +"'>"+ i +"</option>";
         });
         $("<select>", {
          name: arr[0][i],
          classname: arr[4][i]
         }).append( option ).appendto( $item );
         break;
        case "custom"://自定义内容，支持html
         $item.append( arr[2][i] );
         break;
        default://默认是input
         $("<input>", {//jquery1.4新增方法
          name: arr[0][i],
          type: arr[1][i],
          value: arr[2][i],
          maxlength: arr[3][i],
          classname: arr[4][i]
         }).appendto( $item );
       }
      });
      $item = $container.children(o.wrap);
      //新组数
      len = $item.length;
      if ( len > 1 ) {
       $item.last().append(oo.remove);
       if ( len === 2 ) {//超过一组时，为第一组添加“移除”按钮
        $item.first().append(oo.remove);
       }
      }
      $item.find(".remove").click(function(){
       //移除本组
       $(this).parent().remove();
       //统计剩下的组数
       len = $container.children(o.wrap).length;
       if ( len === 1 ) {//只剩一个的时候，把“移除”按钮干掉
        $container.find(".remove").remove();
       }
       //取消“移除”按钮的默认动作
       return false;
      });
     }
     //取消触发器的默认动作
     return false;
    });
    //初始化
    if ( $.isarray(o.initvalue) ) {//判断初始值是否是数组（必需的）
     $.each(o.initvalue, function(i, n) {
      if ( !$.isarray(n) ) {
       $container.empty().text(oo.error2);
       return false;
      }else{
       if ( n.length !== arr[0].length ) {
        $container.empty().text(oo.error1);
        return false;
       }
      }
      var arrvalue = new array();
      //初始值替换默认值
      $.each(n, function(j, m) {
       arrvalue[j] = arr[2][j]
       arr[2][j] = m;
      });
      $clicker.click();
      //默认值替换初始值
      $.each(arrvalue, function(j, m) {
       arr[2][j] = m;
      });
      //上面这种[移形换位法]不知道效率怎么样，我想不出别的更好的方法
     });
    }else{
     $clicker.click();
    }
   }
  }
});
})(jquery);
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>

<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>

时间： 2024-10-11 23:44:10

js 动态添加input、select等表单元素代码的相关文章

php+js处理大量input输入框与表单提交获取问题

近段时间接到一个比较奇葩的需求,对方要求在企业站中加入一个类似word的表单,并供用户在线填写与提交. 仔细看了一下,该表单的字段高达一百多个,这个量级是相当可怕的.如果每个input手动去填写id和name的话,该是一个多么可怕的体力活啊. 反复思考了一下,为避免苦逼的去逐个填写input的id与name,决定用JS配合PHP的方式来解决这个表单一连串的提交工作. 表单组成部分表单首先按照客户的要求,将需要填写的表格与选项按照word文档的原型进行布局,使其符合用户体验,如下图:

JS动态添加option和删除option(附实例代码)_javascript技巧

1.动态创建select 复制代码代码如下: function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码代码如下: function addOption(){ //根据id查找对象, var obj=docume

jQuery复制表单元素附源码分享效果演示_jquery

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

基于jQuery复制表单元素的例子

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能.首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script src="jquery.

使用bootstrapValidator插件进行动态添加表单元素并校验_javascript技巧

一.前言实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV

JS动态添加与删除select中的Option对象

本篇文章主要介绍了JS动态添加与删除select中的Option对象(示例代码) 需要的朋友可以过来参考下,希望对大家有所帮助如下所示: 代码如下: //动态删除select中的所有options: function delAllOptions(){ document.getElementById("user_dm").options.length=0; } //动态删除select中的某一项option: function delOne

用ASP的方法动态写出JavaScript的表单验证的函数checkSubmit()

javascript|表单验证|动态|函数 <%'请转存为CheckForm_JS.asp使用 '*****************************************************************************'函数名称:CheckForm_JS(frmName,errStr)'功能:用ASP的方法动态写出JavaScript的表单验证的函数checkSubmit()'使用方法:1.<!--Include File=URL+本函数所在的页>;'

ASP动态生成的javascript表单验证代码

javascript|表单验证|动态以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带

利用js动态添加删除table行的示例代码

本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助如下所示: 代码如下: //动态添加行 function addRow(){ var table = document.getElementById("tableID"); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格