Javascript Html表格可编辑

我有一个非常简单的表结构

<table width='50%' id='tabs'>
<tr><td>1</td><td>5</td><td>6</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>2</td><td>2</td></tr>
</table>

156
222
322

这是我的简单脚本，用于使表可编辑。这很好，但我发现它速度慢，代码效率低。我想改进这段代码。顺便说一下，我正在使用jquery 1.3.2

var z={};
function tdClicks(){
var x="",y="";
$("table tr td").click(function(){
    z=$(this);
    x = $(this).text() || $(this).find("input[type='text']").val();
    if(!x){
        x="";
    }
    $(this).html("<input type='text' size='5' value='"+ x+"' />");
    $(this).unbind("click");
    $(this).find("input[type='text']").bind("blur", function(){
        catchme($(this).val());
        tdClicks();
    });
});
}

function catchme(wht){
    $(z).text(wht);
}

tdClicks();

var z={}；
函数tdClicks（）{
var x=“”，y=“”；
$（“表tr td”）。单击（函数（）{
z=$（本）；
x=$（this.text（）| |$（this.find）（“input[type='text']）.val（）；
如果（！x）{
x=“”；
}
$（this.html（“”）；
$（此）。解除绑定（“单击”）；
$（this）.find（“input[type='text']”）.bind（“blur”，function（）{
catchme（$（this.val（））；
tdc（）；
});
});
}
函数catchme（wht）{
$（z）.文本（wht）；
}
tdc（）；

请参见

也许它可以帮助：

$(function(){  
  var x="",y="";
  $("table tr td").click(function(){
    x = $(this).text() || $(this).find("input[type='text']").val();
    if(!x){
       x="";
    }
    $(this).html("<input type='text' size='5' value='"+ x+"' />");
    $(this).unbind("click");
    $(this).find("input[type='text']").bind("blur", function(){
      $(this).text($(this).val());
    });
  });
});

$（函数（）{
var x=“”，y=“”；
$（“表tr td”）。单击（函数（）{
x=$（this.text（）| |$（this.find）（“input[type='text']）.val（）；
如果（！x）{
x=“”；
}
$（this.html（“”）；
$（此）。解除绑定（“单击”）；
$（this）.find（“input[type='text']”）.bind（“blur”，function（）{
$（this.text（$（this.val（））；
});
});
});

---

祝你好运这看起来干净了点

$("table").on("click", "td:not(.active)", function () {    
    var $this = $(this);
    var $textbox = $("<input>", { type: "text", size: 5, value: $this.addClass("active").text() });
    $this.html($textbox);
    $textbox.focus();    
});

$("table").on("blur", "input:text", function () {        
    var $this = $(this);
    $this.parent().removeClass("active").text($this.val());
});

$（“表”）。在（“单击”，“td:not（.active）”，函数（）{
var$this=$（this）；
var$textbox=$（“”，{type:“text”，大小：5，值：$this.addClass（“active”）.text（）}）；
$this.html（$textbox）；
$textbox.focus（）；
});
$（“表”）。在（“模糊”，“输入：文本”，函数（）{
var$this=$（this）；
$this.parent（）.removeClass（“active”）.text（$this.val（））；
});

---

试试这个

$("table tr td").on('blur',"input[type='text']", function( e ){

    $(this).closest('td').text( 
        $(this).val()
    );
});

$("table").on('click','td', function( e ){

   if ( $(this).find('input').length ) {
       return ;   
   }    

   var input = $("<input type='text' size='5' />")
                  .val( $(this).text() );

   $(this).empty().append( input );

});

$（“table tr td”）。关于（'blur'，“input[type='text']”，函数（e）{
$（this）.最近（'td'）。文本（
$（this.val（）
);
});
$（“表”）。在（'click'，'td'，函数（e）上{
if（$（this）.find（'input'）.length）{
返回；
}    
变量输入=$（“”）
.val（$（this.text（））；
$（this）.empty（）.append（输入）；
});

你可以找到小提琴

---

我已经更新了jQuery1.3的代码，作为用户注释

$("table td").click( function( e ){

    if ( $(this).find('input').length ) {
         return ;   
    }        
    var input = $("<input type='text' size='5' />")
                      .val( $(this).text() );

    $(this).empty().append( input );

    $(this).find('input')
           .focus()
           .blur( function( e ){
                  $(this).parent('td').text( 
                     $(this).val()
                  );
            });    
});

$（“表td”）。单击（函数（e）{
if（$（this）.find（'input'）.length）{
返回；
}        
变量输入=$（“”）
.val（$（this.text（））；
$（this）.empty（）.append（输入）；
$（this.find（'input'））
.focus（）
.blur（函数（e）{
$（this.parent（'td'）。文本（
$（this.val（）
);
});    
});

---

选中此项

您可以使用

contenteditable

属性

javascript

$("table tr td").attr("contenteditable", true);

要在internet explorer中执行此操作，请使用以下命令

$("table tr td").each(function() {
    var contents = $(this).html();
    $(this).html($("<div>").append(contents));
});
$("table tr td div").attr("contenteditable", true);

$（“表tr td”）。每个（函数（）{
var contents=$（this.html（）；
$（this.html（$（“”）.append（contents））；
});
$（“表tr td div”）.attr（“内容可编辑”，真）；

请查看此问题以了解更多详细信息

---

是否要使用

contenteditable

表格？您可能可以通过不破坏blur上的文本框并通过隐藏它来重新使用它来优化此功能。嘿，在jquery 1.3.2中，此功能不起作用。方法不支持代替

上的
使用
委托
或
live
。或升级到最新的jQuery；）我需要在jQuery1.3.2中使用它，还有其他替代方法吗