表格编辑并实现ajax回写

最新推荐文章于 2022-11-21 15:16:28 发布

blogzlh

最新推荐文章于 2022-11-21 15:16:28 发布

阅读量1k

点赞数

分类专栏： javaScript 文章标签：表格编辑 ajax回写 ajax异步

本文链接：https://blog.csdn.net/blogzlh/article/details/41730505

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

$(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);		
}