黑马程序员技术交流社区

标题: Jquery问题 [打印本页]
作者: 佟亚鹏    时间: 2012-9-8 10:16
标题: Jquery问题
本帖最后由 佟亚鹏 于 2012-9-8 12:15 编辑

我想用Jquery实现一个可以编辑的表格，当点击网页的表格的td时，显示出一个文本框，内容为td里原来的内容，当编辑好以后，离开文本框，文本框消失，把修改好的内容在设置到原来的td中，但是运行以后，只能编辑一次，在点击时文本框不出现了，请帮我看下代码那个有问题：
  1. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  2.     <script type="text/javascript" >
  3.         $(function () {
  4. //$("input").css("display", "none").attr("size", "6");
  5. //为table的所有td添加点击事件
  6.             $("#table td").click(tdClick);
  7.             function tdClick() {
  8.                 var td = $(this);
  9.                 var text = td.text();
  10.                 td.text("");
  11.                 var input = $("<input id='in' type='text' value=" + text + " />");
  12.                 input.blur(function () {
  13.                     td.html(input.val());
  14.                 });

  16.                 td.append(input);
  17.                 td.unbind("click");
  18.                 //转为dom对象
  19.                 var inputDom = input.get(0);
  20.                 input.select();
  21.             }
  22.         });
  23.     </script>
复制代码
作者: 李京    时间: 2012-9-8 10:29
本帖最后由 李京 于 2012-9-8 10:57 编辑


希望可以帮到你~
作者: 佟亚鹏    时间: 2012-9-8 11:04
问题解决，多谢回答
作者: 舒远    时间: 2012-9-8 11:27
本帖最后由 舒远 于 2012-9-8 11:46 编辑
  1. $(function(){
  2.                 $("td").click(function(e){
  3.                         var width =$(this).width() < 100 ? 100 : $(this).width();
  4.                         var text = $.trim($(this).text());
  5.                         $(this).html("<input type='text' style='width:"+width+"' />");
  6.                         $("input",this).focus().click(function(event){
  7.                                 event.stopPropagation() ;
  8.                         }).val(text).blur(function(){
  9.                                $(this).parent().html($(this).val()).width(width);
  10.                         });
  11.                 }).css({'text-align':'center','padding':'0px'});
  12.         });        
复制代码
我也给实现了一个，以前没做过这个效果，算是锻炼一下。。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2