Question

I want to build excel like utility in HTML. Suppose I’ve table[id “myTbl”] with 20 rows & 20 columns. I would like to add textbox inside td whenever users clicks on it with td text as its value.

Suppose my table is

I’ve 2 options to achieve this [both are working fine]

Option I

$("#myTbl").bind("click",function(e){
    var obj = e.target;
    if(obj.nodeName == "TD"){
        $(obj).html("<input type='text' value='"+$(obj).html()+"'></input>");
    }
});

Option II

$("#myTbl tr td").bind("click",function(e){
    if($("input",$(this)).length==0){
        $(this).html("<input type='text' value='"+$(this).html()+"'></input>");
    }
});

My question is which option is better in terms of performance.

Answer 1

The first of your two options will create only one event handler, so it’ll be more performant.
Obtaining the target via the event as you do has negligible cost.

To do it the ‘jQuery’ way, you might want to use delegate:

$("#myTbl").delegate("td", "click", function() {
  var $this = $(this);
  $this.html("<input type='text' value='"+$this.text()+"'></input>");
});