<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 >
<span style="overflow: hidden;">12123aa</span>
<input >
</div>
<div>
<table >
<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>
相关文章：