使用
Jquery实现点击文字变为文本框效果，可对文本框文字进行修改。
1.点击文字变为文本框
2.文本框自动全选文字
3.对文本框内容进行修改
4.点击文本框以外的地方文本框再次变为修改后的文字
5.同步更新
sql数据库内容
html部分代码
<table width="200">
<tr>
<td><b>ID</b></td>
<td><b>名称</b></td>
<td><b>操作</b></td>
</tr>
<tr>
<td><b>1</b></td>
<td class="caname"><b>哈哈</b></td>
<td><b>删除</b></td>
</tr>
<tr>
<td><b>2</b></td>
<td class="caname"><b>哈哈</b></td>
<td><b>删除</b></td>
</tr>
<tr>
<td><b>3</b></td>
<td class="caname"><b>哈哈</b></td>
<td><b>删除</b></td>
</tr>
</table>
新建edit.
js文件，代码如下
$(funct
ion() {
//获取class为caname的元素
$(".caname").click(function() {
var td = $(this);
var txt = td.text();
var input = $("<input type='text'value='" + txt + "'/>");
td.html(input);
input.click(function() { return false; });
//获取焦点
input.trigger("focus");
//文本框失去焦点后提交内容，重新变为文本
input.blur(function() {
var newtxt = $(this).val();
//判断文本有没有修改
if (newtxt != txt) {
td.html(newtxt);
}
else
{
td.html(newtxt);
}
});
});
});
Html头部引用jq类库文件和自己写的edit.js文件，注意顺序
<script src="../js/jquery.js" type="text/
javascript"></script>
<script src="../js/edit.js" type="text/javascript"></script>
0