title: Binding click event to td vs table
body: <p>I want to build excel like utility in HTML. Suppose I've table[id "myTbl"] with 20 rows &amp; 20 columns. I would like to add textbox inside td whenever users clicks on it with td text as its value.</p>
  
  <p>Suppose my table is <br />
   <img src="https://i.stack.imgur.com/ezhY8.png" alt="alt text"></p>
  
  <p>I've 2 options to achieve this [both are working fine]</p>
  
  <p>Option I</p>
  
  <pre><code>$("#myTbl").bind("click",function(e){
      var obj = e.target;
      if(obj.nodeName == "TD"){
          $(obj).html("&lt;input type='text' value='"+$(obj).html()+"'&gt;&lt;/input&gt;");
      }
  });
  </code></pre>
  
  <p>Option II </p>
  
  <pre><code>$("#myTbl tr td").bind("click",function(e){
      if($("input",$(this)).length==0){
          $(this).html("&lt;input type='text' value='"+$(this).html()+"'&gt;&lt;/input&gt;");
      }
  });
  </code></pre>
  
  <p>My question is which option is better in terms of performance.</p>