Переключить событие click to td vs table

Question

Я хочу создать excel как утилиту в HTML. Предположим, что у меня есть таблица [id "myTbl"] с 20 строками & 20 столбцов. Я хотел бы добавить текстовое поле внутри td, когда пользователи нажимают на него с текстом td в качестве значения.

Пусть мой стол

Я 2 варианта для достижения этого [как работают отлично]

Вариант I

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

Вариант II

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

Мой вопрос: ch лучше с точки зрения производительности.

Answer 1

Первый из ваших двух вариантов создаст только один обработчик событий, поэтому он будет более результативным. Получение цели через событие, как и вы, имеет незначительную стоимость.

Чтобы сделать это путем «JQuery», вы можете использовать delegate:

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

Answer 2

Я бы сказал, что привязка его к таблице намного лучше, потому что у вас нет дополнительных накладных расходов на поддержание всех обработчиков кликов для каждой ячейки.