点击上述图片中红框里的位置可以替换成input文本框如下图
第一个问题来了,如何控制实现一个页面中只能出现一个文本框呢
?点击一图
中的其他三个位置不完成替换;
第二个问题:我点击页面的任意一个位置
,实现获取到文本框中的值并替换掉当前,还是看图吧
做完这些之后,再点击一图
其他位置进行上述操作;
附上部分代码,不完整;
<code> <tr> <td colspan="9">采样日期:<span name="date" onclick="replace_input(this)">2016.317</span> 天气: <span onclick="replace_input(this)">_________</span> 温度:<span onclick="replace_input(this)">__________℃</span> 湿度<span onclick="replace_input(this)">______%</span></td> </tr> <script type='text/javascript'> function replace_input(e) { $(e).replaceWith("<input type='text' value=''/>"); } </script></code>
---------------------------分割线-----------------------------
很失望,盼了一晚还是没有等到自己想要的答案,不知道是我描述不清楚还是什么原因。最后还是自己想到了,谢谢一楼的三个链接,虽然我看不懂。也谢谢二楼给的方向,虽然我没深入思考过。代码如下
<code> var input_flag = true; //设定全局变量为true 关键 function replace_input(e) { if (input_flag) { var html = "<input type='text' value='' />"; var input = $(e).html(html).find('input'); input.focus().val(''); input_flag = false; input.blur(function() { var html = $(this).val(); $(e).html(html); input_flag = true; }); } };</code>
点击上述图片中红框里的位置可以替换成input文本框如下图
第一个问题来了,如何控制实现一个页面中只能出现一个文本框呢
?点击一图
中的其他三个位置不完成替换;
第二个问题:我点击页面的任意一个位置
,实现获取到文本框中的值并替换掉当前,还是看图吧
做完这些之后,再点击一图
其他位置进行上述操作;
附上部分代码,不完整;
<code> <tr> <td colspan="9">采样日期:<span name="date" onclick="replace_input(this)">2016.317</span> 天气: <span onclick="replace_input(this)">_________</span> 温度:<span onclick="replace_input(this)">__________℃</span> 湿度<span onclick="replace_input(this)">______%</span></td> </tr> <script type='text/javascript'> function replace_input(e) { $(e).replaceWith("<input type='text' value=''/>"); } </script></code>
---------------------------分割线-----------------------------
很失望,盼了一晚还是没有等到自己想要的答案,不知道是我描述不清楚还是什么原因。最后还是自己想到了,谢谢一楼的三个链接,虽然我看不懂。也谢谢二楼给的方向,虽然我没深入思考过。代码如下
<code> var input_flag = true; //设定全局变量为true 关键 function replace_input(e) { if (input_flag) { var html = "<input type='text' value='' />"; var input = $(e).html(html).find('input'); input.focus().val(''); input_flag = false; input.blur(function() { var html = $(this).val(); $(e).html(html); input_flag = true; }); } };</code>
jquery editable
http://shokai.github.io/jQuery.editable/Jeditable
http://www.appelsiini.net/projects/jeditableX-editable
https://vitalets.github.io/x-editable/
这个貌似是jQuery UI具有的功能