td 대 테이블에 대한 클릭 이벤트 연결

HTML에서 유틸리티처럼 Excel을 빌드하려고합니다. 20 행 & 개의 20 개의 열이있는 테이블 [id "myTbl"]이 있다고 가정합니다. 사용자가 td 텍스트를 값으로 클릭 할 때마다 텍스트 상자를 추가하고 싶습니다.td 대 테이블에 대한 클릭 이벤트 연결

나는이 [모두 작업 벌금을 달성하기 2 옵션을했습니다 내 테이블
alt text

입니다 가정

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

내 질문은 whi입니다. ch 옵션은 성능 측면에서 더 좋습니다.

출처

2010-12-02 Chinmayee G

다음/보여

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

이 클릭에 그것을 숨기고 흐리게 ? –

하지만 내 페이지 크기가 커집니다. 또한 사용자가 각 td를 클릭 할 필요는 없습니다. 권리? –

맞지만 성능에 대해 물어 보았습니다. 여분의 킬로바이트가 거의없는 최신 대역폭은 페이지로드 시간에 눈에 띄는 효과가 없습니다. :) –

두 가지 옵션 중 첫 번째 옵션은 하나의 이벤트 핸들러 만 생성하므로 성능이 향상됩니다. 이벤트를 통해 목표를 얻는 것은 무시할 수있는 비용입니다.

이에게 'jQuery를'방법을 수행하려면 delegate을 사용할 수 있습니다 :

사전에 모든 셀에 텍스트 상자를 숨겨 가지고 있지 왜

출처

2010-12-02 07:45:02 sje397

펀치에 나를 이길. 위임 메소드가 1.4.2에 추가되었으므로 최신 정보를 사용해야합니다. –

그 코드는 각'td '에 대한 이벤트 핸들러를 생성하는 것과 같은 일을합니까? 또한 왜 'jQuery'방식입니까? –

아니요 하나의 이벤트 핸들러 만 만듭니다. 이것은 'jQuery way'입니다. 왜냐하면이 목적을 위해 만들어진 jQuery 함수이기 때문입니다. 당신을 위해 이벤트 타겟 로직 등을 처리합니다 (핸들러 함수의 컨텍스트는'td' 요소입니다). – sje397

각 셀에 대한 모든 클릭 핸들러를 유지 관리하는 추가 오버 헤드가 없으므로 테이블에 바인딩하는 것이 훨씬 더 효율적이라고 말합니다.

출처

2010-12-02 07:43:50

td 대 테이블에 대한 클릭 이벤트 연결

답변

관련 문제