Html table editable

Question

I have a very simple table structure

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

and here is my simple script to make table editable this is working fine but i found that it is slow and code is not efficient.I would like to improve this code.By the way i am working with 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();

Please see JS FIDDLE HERE

Don't you want to use `contenteditable` table? http://jsfiddle.net/v7znh/10/ — dfsq, Mar 21 '13 at 12:59

rab · Accepted Answer · 2013-03-22T05:10:52.007

try this

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

});

and you can find it fiddle http://jsfiddle.net/v7znh/13/

I have updated code for jquery 1.3, as user comment

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

check this http://jsfiddle.net/v7znh/16/

is there any other alternative instead of using on i need to make it workable in jquery 1.3.2 — Murali N, Mar 22 '13 at 04:41

hunter · Answer 2 · 2013-03-21T13:06:50.710

3

This seems a bit cleaner

$("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/

edited Mar 21 '13 at 13:06

answered Mar 21 '13 at 12:59

hunter

62,308
19
113
113

1

you could probably optimize this by not destroying the text box on blur and reusing it for later by hiding it. – hunter Mar 21 '13 at 13:00
hey this is not working in jquery 1.3.2 on method was not supported – Murali N Mar 21 '13 at 14:09
instead of `on` use `delegate` or `live`. Or upgrade to the latest jQuery ;) – hunter Mar 21 '13 at 14:47

score 3 · Answer 3 · edited May 23 '17 at 11:53

you can use the contenteditable attribute

javascript

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

example

to make this work in internet explorer use the following

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

example

have a look at this question for more details

How to make HTML table cell editable?

score -1 · Answer 4 · answered Mar 21 '13 at 12:56

Maybe it can help:

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

good luck

Html table editable

4 Answers4