JQuery_jquery를 기반으로 편집 가능한 테이블 효과 만들기

최근에 프로젝트를 진행했는데 프로젝트 요구 사항은 다음과 같습니다. 직접 편집하려면 표를 클릭하고, Enter 키를 누르거나 편집 내용을 적용하려면 페이지의 다른 곳을 클릭하고, 편집을 취소하려면 Esc 키를 누르세요.

두 친구가 2가지 해결책을 제시했는데 어느 것이 더 적합한지 살펴볼까요?

테이블을 클릭하여 편집하는 첫 번째 방법

코드 복사 코드는 다음과 같습니다.

//페이지의 body 태그에 onload 이벤트를 추가하는 것과 같습니다
$(함수() {
//모든 td 노드 찾기
var tds = $("td");
//모든 td에 클릭 이벤트 추가
tds.click(함수() {
//현재 클릭한 객체를 가져옵니다
        var td = $(this);
// 현재 td의 텍스트 내용을 꺼내서 저장합니다
        var oldText = td.text();
//텍스트 상자를 생성하고 텍스트 상자의 값을 저장된 값으로 설정
          var input = $("");
//현재 td 객체의 내용을 입력으로 설정
        td.html(입력);
//텍스트 상자의 클릭 이벤트를 유효하지 않게 설정
​​​​ input.click(function() {
              false를 반환합니다.
        });
//텍스트 상자 스타일 설정
​​​​ input.css("border-width", "0");
​​​​ input.css("font-size", "16px");
​​​​ input.css("text-align", "center");
//텍스트 상자의 너비를 td의 너비와 동일하게 설정
​​​​ input.width(td.width());
​​​​ //텍스트 상자에 포커스가 있을 때 모두 선택 이벤트를 트리거합니다
​​​​ input.trigger("focus").trigger("select");
//텍스트 상자가 포커스를 잃으면 다시 텍스트로 변경됩니다
​​​​ input.blur(function() {
            var input_blur = $(this);
//현재 텍스트 상자의 내용을 저장
            var newText = input_blur.val();
            td.html(newText);
        });
//키보드 이벤트에 대한 응답
​​​​ input.keyup(함수(이벤트) {
// 키 값 가져오기             var keyEvent = 이벤트 || window.event;
          var key = keyEvent.keyCode;
//현재 객체 가져오기
            var input_blur = $(this);
               스위치(키)
                                                   {
case 13://Enter 키를 눌러 현재 텍스트 상자의 내용을 저장하세요
                  var newText = input_blur.val();
                     td.html(newText);
휴식;
                     사례 27://Esc 키를 누르면 수정이 취소되고 텍스트 상자가 텍스트로 전환됩니다.
                     td.html(oldText);
휴식;
            }
        });
});
});

수정할 표를 클릭하는 두 번째 방법

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
    var tds = $("td");
    tds.click(tdClick);
});
함수 tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var 입력 = $("");
    input.val(tdtext); //    input.attr("value",tdtext);
    input.keyup(함수(이벤트){
        var myEvent = 이벤트 || window.event;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var 입력노드 = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();
            td.html(입력텍스트);
            td.click(tdClick);
        }
        if(keyCode == 27){  //判断是否按下ESC键
            $(this).parent().html(tdtext);
            $(this).parent().click(tdClick);
        }
    });
    tdnode.append(입력);
    tdnode.children("input").trigger("select");
    //输入框失去焦点, 所执行点
    input.blur(함수(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("클릭");
}

想比较来说，个人更喜欢第two种一些，small伙伴们是什么意见呢，欢迎留言给我。