前端之家收集整理的这篇文章主要介绍了
表格编辑并实现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);
}