Click to td vs table event binding

I want to create excel as a utility in HTML. Suppose I have a table [id "myTbl"] with 20 rows and 20 columns. I would like to add a text box inside td when users click on it with the text td as the value.

Suppose my table
 alt text

I have 2 options for this [both work 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.

+3
source share
2 answers

, . , , .

"jQuery", delegate:

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

, , .

+1

Source: https://habr.com/ru/post/1778053/


All Articles