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

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

});

你可以找到它 fiddle 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/