jquery技术实现双击表格时在td里添加输入框,焦点离开时输入框消失,但输...

发布网友发布时间：2022-04-24 05:36

共2个回答

热心网友时间：2022-05-15 12:33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table中tdの変更</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("td").dblclick(function(){
$(this).text("");
var input = "<input type='text'>"
$(this).append(input);
$("input").focus();
$("input").blur(function(){
if($(this).val()==""){
$(this).remove();
}else{
$(this).closest("td").text($(this).val());
}
})
})
})
</script>
<style type="text/css">
#table tr td {
padding:5px 44px;
}
</style>
</head>
<body >
<form id="theForm">
<table id="table" border="1" cellspacing="0">
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>
</form>
</body>
</html>

代码你测一下，注意修改jquery包的路径，有问题可追问！！追问在输入框出来的时候，双击输入框里的内容会出现源码，，例如：
输入框里的内容是你好，则双击内容的时候会变成：
请问，该怎么解决？？？？？？？？？？？？？？？

追答$(this).append(input);看这行主要问题可能出现在这行
$(this).html(input);这个也可以
不过你写成这个$(this).text(input);就会出现你那样的状况！
把你代码写出来看看

热心网友时间：2022-05-15 13:51

请问楼主解决了么我也出现这问题