html 页面控件动态添加和删除

最新推荐文章于 2021-06-15 18:52:41 发布

alongshow

最新推荐文章于 2021-06-15 18:52:41 发布

阅读量1.3k

点赞数

分类专栏： js jquery html 文章标签： html javascript function wrapper button null

js jquery html 专栏收录该内容

8 篇文章

订阅专栏

1.dynamicAddRemover.js

/**
 * dynamicAddRemover.js
 * @author: Zhongy
 * @version: 0.0.3
 */
 $.fn.dynamicAddRemover = function(options){
	//Merge the default options and the custom options
	options = $.extend({}, 
						$.fn.dynamicAddRemover.defaults, 
						{rootWrapper: !$(this).attr("id")? $(this) : "#" + $(this).attr("id")}, 
						options);
			
	//Define the add click event
	var addClickEvent = function(event){
		var refWrapper = event.data;
		var newWrapper = refWrapper.clone();
		
		//execute the custom event before adding.
		if(options.addingEvent != null){
			options.addingEvent(newWrapper, options);
		}
		
		refWrapper.after(newWrapper);		//append the new wrapper after the last wrapper.
		newWrapper.find("img[id$='" + options.adderId + "']").show().unbind().bind("click", newWrapper, addClickEvent);
		newWrapper.find("img[id$='" + options.removerId + "']").show().unbind().bind("click", newWrapper, removeClickEvent);
		newWrapper.attr("isDynamic", "true");
		$(this).hide();		//hide the expand button which fire the event.
		
		//execute the custom event after adding, 
		//you can write the event of modifying the controls' id in the wrapper.
		if(options.addedEvent != null){
			options.addedEvent(newWrapper, options);
		}
	};
	
	//Define the remove click event
	var removeClickEvent = function(event){
		var refWrapper = event.data;
		var rootWrapper = refWrapper.parent();
		var prevWrapper = refWrapper.prev();
		var nextWrapper = refWrapper.next();
		
		//show the previous wrapper's add button.
		if(!nextWrapper.attr("isDynamic")){
			prevWrapper.find("img[id$='" + options.adderId + "']").show();
		}
		
		//execute the custom event before removing.
		if(options.removingEvent != null){
			options.removingEvent(refWrapper, options);
		}
		
		//remove the wrapper using DOM.
		rootWrapper.get(0).removeChild($(refWrapper).get(0));
		
		//execute the custom event after removing.
		if(options.removedEvent != null){
			options.removedEvent(prevWrapper, nextWrapper, options);
		}
	};	
	
	//initialize the dynamicAddRemover UI and attach the event.
	var imgHtml = "<span id='spn'>" +
				  "<img id='" + options.removerId + "' src='" + options.collapseImgUrl + "' style='padding:0px 5px 0px 5px;cursor:pointer' />" + 
				  "<img src='" + options.expandImgUrl + "' id='" + options.adderId + "' style='padding:0px 5px 0px 5px;cursor:pointer' /></span>";
	$(this).find("tr:last").append("<td>" + imgHtml + "</td>");		//append the image button after the wrapper.
	$(this).find("img[id$='" + options.adderId + "']").unbind().bind("click", $(options.rootWrapper), addClickEvent);		
	$(this).find("img[id$='" + options.removerId + "']").hide();		
 };
 
 $.fn.dynamicAddRemover.defaults = {
	rootWrapper: "table",	
	addingEvent: null,
	addedEvent: null,
	removingEvent: null,
	removedEvent: null,
	adderId: "imgExpBtn",
	removerId: "imgColBtn",
	collapseImgUrl: 'icon_collapse.gif',
	expandImgUrl: 'icon_expand.gif'
 };

2.测试1 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>

3.测试2 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(){
            $("#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>