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

//페이지의 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);
휴식;
            }
        });
});
});