Binding click event to td vs table

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.

Answers


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

Need Your Help

Dropdown list text in Chrome weirdness

google-chrome drop-down-menu twitter-bootstrap-3 asp.net-mvc-5

I have a very strange bug that's only present in Google Chrome. It's a drop-down menu that renders the option text with each character replaced by the one that follows it in Unicode. Here's an imag...

Was program opened by a user or was it started from windows registry start up?

c# .net windows startup

Is it somehow possible to detect whether program was started by a user or it was started automatically from registry at Windows start up?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.