双击内容变input框可编辑，失去焦点后修改的数据异步提交
<html>
<head>
<meta charset="utf8">
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
// alert(0);
$("#div_input").dblclick(function(){
// alert(0);
// $(this).hide();
$("#text_input").val($("span").html());
$("span").hide();;
$("#text_input").show().focus();
});
$("#text_input").blur(function(){
$("span").html($(this).val()).show();
$("#text_input").hide();
});
$("#table1 td").dblclick(function(){
var td = $(this); //获取当前的td
// 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整
var text = td.text(); //获取当前td里的内容
// alert(text);
var txt = $("<input type='text'>").val(text); //当前td里的值放放input的框里
td.text(""); //清空td的值
td.append(txt); //向当前td里插入input框
txt.blur(function(){
// 失去焦点，保存值。于服务器交互自己再写,最好ajax
var newText = $(this).val();
// 移除文本框,显示新值
$(this).remove();
td.text(newText); //新值放入当前td里
alert('修改成功');
});
});
});
</script>
</head>
<body>
<div id="div_input" style="width:152px;height:22px;border:1px solid #369;">
<span style="overflow: hidden;">12123aa</span>
<input id="text_input" type="text" style="display:none;width:152px;height:22px;overflow: hidden;" name="" value="123">
</div>
<div>
<table id="table1" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
</body>
</html>
[Haima的博客]
http://www.cnblogs.com/haima/
分类:
JQuery
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构