jquery动态增加删除控件实例代码

可以添加在增减过程中需要的自定义参数和变量,如: $("table").dynamicaddremover({param1:"param1", param2:"param2"});
使用时,如:options.param1等等。
.根容器必须有唯一id且指定时必须唯一。如果有多个模块(多个根容器)需要使用可以这样:$("#table1").dynamicaddremover(),$("#table2").dynamicaddremover()等等。
.新添加的控件里的id和name并没有更新,如果有特别业务需要,请在addedevent里添加生成新id的业务逻辑。

实例一

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title></title>
<script language="网页特效" src="jquery-1.4.2.min.网页特效"></script>
<script language="javascript" src="dynamicaddremover.js"></script>
<script language="javascript">

$(function(){
$("#table1").dynamicaddremover({
addedevent:function(newctl, options){
//clear the textbox.
newctl.find(":text").val('');
if($("table").size() > 5)
{
//hide the add button.
newctl.find("img[id$='" + options.adderid + "']").hide();
}
},
removedevent:function(prevctl, nextctl, options){
if($("table").size() <= 5)
{
//show the add button.
$("table:last").find("img[id$='" + options.adderid + "']").show();
}
}
});
});
</script>
</head>
<body>
<table id='table1'>
<tr>
<td>
<select>
<option value ="volvo">volvo</option>
<option value ="saab">saab</option>
<option value="opel">opel</option>
<option value="audi">audi</option>
</select>
<input type="text" name="text1" id="text1" value="text"></input>
<button type="button" name="btn1" value="btn1" id="btn1" >button</button>
</td>
</tr>
</table>
</body>
</html>

实例二

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title></title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" src="dynamicaddremover.js"></script>
<script language="javascript">
$(function(){
$("table").dynamicaddremover();
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select>
<option value ="volvo">volvo</option>
<option value ="saab">saab</option>
<option value="opel">opel</option>
<option value="audi">audi</option>
</select>
<input type="text" name="text1" id="text1" value="text"></input>
<button type="button" name="btn1" value="btn1" id="btn1" >button</button>
</td>
</tr>
</table>
</body>
</html>

增加控件,如文件上传框,输入框都可以用上面二个例子来实例,不过实例一是一款可以控制增加控制的个数限制的,实例了无限的,增加删除控件

时间: 2024-08-02 13:23:12

jquery动态增加删除控件实例代码的相关文章

jquery 动态增加删除行的简单实例(推荐)_jquery

最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋值 var length = $("#grid tr").length; //获得当前是第几行,以便追加的时候,在该行下进行新增,我这里跨的级别比较多,根据实际层级去定义 var current = $(obj).parent().parent().parent().prevAll().l

Android 底部导航控件实例代码_Android

一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie

Android 底部导航控件实例代码

一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie

四种jquery 动态增加option下拉框代码

function loadsteel_num(typeid){ var drp2 = $("drsteel_num"); drp2.options.length=0; downloadurl('bsorder_steel_num.asp教程x?b_typeid='+typeid, function (xml, responsecode) {  var dom  if(document.all)//ie  {    dom=new activexobject("microsof

简单的ASP.NET 动态加载控件实现代码

下面示范一个最简单的 范例,就是大家最常见的 Hello World 来示范    代码如下 复制代码 <%@ Page Language="C#" AutoEventWireup="True" %> <script language="C#" runat=server> void SubmitBtn_Click(Object sender, EventArgs e){Label message = new Label()

ASP.NET 页面中动态增加的控件、添加事件第1/2页_实用技巧

要求:页面上有一个Add按钮,每点击一次该按钮,页面上动态创建一个WebPartZone! 提醒:WebPartZone只能在OnInit或之前才能创建,否则报异常! 大家都知道,按钮的点击事件是在RaisePostbackEvent时触发的,这意味着点击事件在OnLoad阶段之后才执行,远远落后于 OnInit阶段,而且ViewState在OnLoad时才准备好,OnInit以及之前的阶段根本就不能使用ViewState!如果试图在按钮点击事件里面创建WebPartZone等控件,唯一的后果就

jQuery动态添加删除select项(实现代码)_jquery

复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d

js动态增加删除上传附件代码

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

Android开发中DatePicker日期与时间控件实例代码

一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activity01 package fry; import com.example.DatePicherDemo1.R; import android.app.Activity; import android.os.Bundle; import android.widget.DatePicker; import android.widget.