可编辑的HTML表格

Question

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

<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>

这是我的简单脚本，用于使表格可编辑。虽然能够正常工作，但是我发现它运行缓慢且代码效率不高。我希望改进这段代码。顺便说一下，我正在使用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();

请查看这里的JS FIDDLE，其中涉及 IT 技术相关内容。

- Murali N

---

你不想使用 contenteditable 表格吗？http://jsfiddle.net/v7znh/10/ - dfsq

Answer 1

尝试这个

$("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 );

});

你可以在jsFiddle找到它http://jsfiddle.net/v7znh/13/

---

我已经更新了 jQuery 1.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()
                  );
            });    
});

检查这个http://jsfiddle.net/v7znh/16/

- rab

---

除了使用“on”之外，是否有其他替代方案可以使其在jQuery 1.3.2中可用？ - Murali N

Answer 2

这看起来更加简洁。

$("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());
});

---

http://jsfiddle.net/hunter/v7znh/12/

- hunter

---

你可以通过在失去焦点时不销毁文本框并将其隐藏以供以后重用来优化它。 - hunter

嘿，这在jQuery 1.3.2中不起作用，on方法不受支持。 - Murali N

请使用“delegate”或“live”代替“on”，或者升级到最新的jQuery ;) - hunter

Answer 3

你可以使用 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);

示例

更多细节请参考这个问题

如何使HTML表格单元格可编辑？

- user2985029

Answer 4

或许这可以帮助：

$(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());
    });
  });
});

祝你好运

- Michael Antonius