日期:2014-05-17  浏览次数:20626 次

jQuery实现动态增加行,发送Ajax请求返回HTML

使用jQuery实现动态增加或删除行,代码如下

增加行
jQuery("#tab").append('<tr><td><input type="checkbox" name="chk" id="chk"/></td><td><input type="text" name="username"/></td><td><input type="text" name="address"/></td><td><input type="text" name="email"/></td></tr>');

?

删除行
var flag = 0;
function deleteRow(){
	var num = jQuery('input[name="chk"]').each(
	function(){
		var check = jQuery(this).attr("checked");
		if(check){
			flag ++;
		}
	}
	);
	if(flag < 1){
		alert('请选择删除行');
	}else{
		jQuery('input[name="chk"]').each(function(){
			var checked = jQuery(this).attr("checked");
			if(checked){
				jQuery(this).parent().parent().remove();
			}
		});
	}
}

?发送Ajax请求

将返回的页面加入到div中
jQuery(document).ready(function(){
		jQuery.post(
		"DynamicAction",
		function(data){
			jQuery('#resultDiv').append(data);
		},
		"html"
		);	
	}		
	);

?

?