表格编辑并实现ajax回写

$(document).ready(function() {		
	var $tds = $("#edittab .货品个数");//edittab 为table的id,货品个数是td的class名
	$tds.dblclick(function() {//在货品个数这列上注册双击事件
		var $td = $(this);
		if ($td.children("input").length > 0) {
			return false;
		}
	
		// 获取$td中的文本内容
		var text = $td.text();
		//获取列的宽度
		var width = $td.width();
		//动态生成,不过这样比较耗性能,可以隐藏在dom中,再在这里取出append到td中
               //可以生成各种元素啦
		var $input = $("<input type='text'>").css("background-color",$td.css("background-color"));
		var $btn = $("<input type='button' value='确定'>");
		//在文本框中设置原本该列的值
		$input.val(text);					
		// 清除td中的文本内容
		$td.html("");
		$td.append($input);
		$td.append($btn);
                //获取焦点，方便用户输入
		$input.focus();
		$td.width(width+40);
                //注册单击事件
		$btn.click(function(){
			var value = $input.val();
			$td.width(width);
			$td.html(value);
			doAjax();
		});					
	});

});


function getHTTPObject(){
	var xmlhttp;
	if (window.XMLHttpRequest) { 
		xmlhttp = new XMLHttpRequest(); 
	}else if (window.ActiveXObject) { 
 		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
	}  
	return xmlhttp;
}

function doAjax(){
	var xmlhttp=getHTTPObject();
	xmlhttp.open("GET","/a.action",false); 		
	xmlhttp.onreadystatechange = function(){
	}
		xmlhttp.send(null);		
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!