jQuery는 IE, Firefox, Safari, Chrome, Opera_jquery를 지원하여 브라우저 간 편집 가능한 테이블을 단계별로 구현합니다.

편집 가능한 테이블 기능을 구현하려면 다음 문제를 해결해야 합니다.
1. 테이블에서 수정할 데이터가 어떤 열인지 명확히 합니다(이러한 셀을 찾는 방법).
2. 편집 가능
3. 셀의 일부 주요 이벤트를 처리하는 방법
4.
jQuery를 통해 위의 문제를 차근차근 해결할 수 있습니다.
1. 표 그리기
먼저 표를 그립니다. " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tbody>

학생번호
이름




;









아래와 같이 표시됩니다.
editTable01.jpg



물론 테이블처럼 보이지도 않고 테두리도 없고 보기 흉합니다. 먼저 이 테이블에 대한 몇 가지 스타일을 설정해 보겠습니다.
Code2:




코드 복사


코드는 다음과 같습니다.


body{}{
글꼴 크기: 14px; }
테이블{}{
색상: #4F6B72;
테두리: 1px #C1DAD7; 테두리 축소: 축소; 너비: 400px ; } 번째{}{
너비: 50%;
테두리: 1px 솔리드 #C1DAD7}
td{}{

너비: 50 %; border: 1px solid #C1DAD7; 이제 효과가 훨씬 좋아졌습니다.

 
하지만 셀 사이에 여전히 겹치는 테두리가 있습니다. 중복 테두리를 제거하려면 라벨 선택기 테이블에 이러한 속성을 추가하기만 하면 됩니다.
border-collapse:collapse




코드 복사


코드는 다음과 같습니다.


table{}{
color:
border: 1px solid #C1DAD7; border-collapse:
width: 400px;
}

editTable03.jpg
테이블의 셀 그리드가 편집 가능한 열이 됩니다테이블을 그린 후 테이블에서 번호가 매겨진 열을 편집 가능한 열로 선택합니다. 이 열의 셀을 편집 가능하게 만들려면 이 열에 텍스트 상자를 삽입해야 합니다. 이 열에 있는 셀의 onclick 이벤트를 통해 텍스트 상자를 삽입합니다. 코드3:

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

$(document).ready(function(){
//학생번호 열의 셀을 모두 찾습니다
//학생번호 열의 셀이 모든 TD에 있으므로 는 짝수(0,2,4,6)이므로 짝수를 통해 td의 짝수 셀로 필터링할 수 있습니다.
var numTd = $("tbody td:even"
//클릭 이러한 td, 텍스트 상자 만들기
numTd.click(function(){
//텍스트 상자 개체 만들기
var inputobj = $("");
//현재 클릭한 셀 객체 가져오기
var tdobj = $(this);
//텍스트 상자 테두리 제거
inputobj.css("border","0");
//텍스트 상자와 셀의 너비를 동일하게 만듭니다.
inputobj.width(tdobj.width())
//텍스트 상자의 글꼴 크기를 셀의 글꼴 크기와 동일하게 만듭니다. 셀
inputobj.css( "font-size",tdobj.css("font-size"))
//텍스트 상자와 셀 글꼴을 일관되게 만듭니다
inputobj.css("font- family",tdobj.css( "font-family"));
//텍스트 상자와 셀의 배경을 일관되게 만듭니다
inputobj.css("Background-color",tdobj.css("Background- color"));
//appendTo 메소드는 td
inputobj.appendTo(tdobj);
});
});

에 텍스트 상자를 추가합니다. 텍스트 상자가 삽입되었습니다. 셀이 들어있습니다. 텍스트 상자를 편집하려면 텍스트 상자에 값이 있어야 하며, 텍스트 상자의 값은 셀의 데이터에서 가져와야 하며 셀의 원본 데이터를 지워야 합니다.
Code4:

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

$(document) .ready( function(){
//학생번호 열의 셀을 모두 찾습니다
//모든 td에서 학생번호 열의 셀 위치가 짝수(0, 2, 4, 6) 짝수를 통해 td
var numTd = $("tbody td:even")
//이 td를 클릭하면 텍스트 상자가 생성됩니다
numTd.click( function(){
//텍스트 상자 객체 생성
var inputobj = $("");
//현재 클릭한 항목 가져오기 cell object
var tdobj = $(this);
//셀의 텍스트 가져오기
var text = tdobj.html()
//셀의 텍스트 지우기
tdobj.html("" );
//텍스트 상자 테두리 제거
inputobj.css("border","0")
//텍스트 상자 및 셀 너비 만들기 일관된
inputobj.width( tdobj.width());
//텍스트 상자의 글꼴 크기를 셀의 글꼴 크기와 동일하게 만듭니다
inputobj.css("font-size", tdobj.css("font-size"));
//텍스트 상자와 셀의 글꼴을 일관되게 만듭니다.
inputobj.css("font-family",tdobj.css("font-family" ));//텍스트 상자와 셀을 동일하게 만듭니다. 배경은 일관되게 유지됩니다.
inputobj.css("Background-color",tdobj.css("Background-color")); .css("color","#C75F3E");
/ /텍스트 상자에 값 할당
inputobj.val(text)
//appendTo 메소드는 td
inputobj.appendTo(tdobj);
});
}) ;


그러나 위의 코드는 매우 번거로워 보입니다. 연쇄. 위 코드는 다음과 같이 연결하여 단순화할 수 있습니다.

Code5:

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

$(document).ready(function(){

//학생 번호 열의 셀을 모두 찾습니다.
//모든 td의 학생 번호 열의 셀 위치는 다음과 같기 때문입니다. 짝수(0,2,4,6)이므로 짝수를 통해 td의 짝수 셀로 필터링할 수 있습니다.
var numTd = $("tbody td:even")//클릭할 때 이러한 td, 텍스트 상자 생성
numTd.click(function(){
//텍스트 상자 객체 생성
var inputobj = $("");
//현재 클릭한 셀 객체 가져오기
var tdobj = $(this);
//셀의 텍스트 가져오기
var text =
//Clear 셀의 텍스트
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size) "))
.css("글꼴-가족",tdobj.css("글꼴-가족"))
.css("배경-색상",tdobj.css("배경-색상"))
.css ("색상","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj)
}); 🎜>})


이제 텍스트 상자가 표에 성공적으로 삽입되었으며 셀을 편집할 수 있습니다.
editTable04.jpg
그러나 명백한
버그가 있습니다.같은 셀을 다시 클릭하면 다음과 같은 효과가 나타납니다.

editTable05.jpg

위 버그의 원인은 무엇인가요? 텍스트 상자에 셀을 삽입한 후에는 텍스트 상자가 셀에 속하기 때문에 텍스트 상자를 클릭하면 셀의 클릭 이벤트도 트리거됩니다.
텍스트 상자의 클릭 동작을 방지해야 합니다(이벤트 버블링 방지).
Code6:

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

inputobj.click( function() {
return false;
});

그러나 셀의 테두리를 클릭하면 위의 버그가 계속 나타나므로 다음과 같이 판단합니다. 셀이 삽입되었습니다. 텍스트 상자, 클릭 이벤트가 팝업됩니다.
Code7:

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

$(document) .ready( function(){
//학생번호 열의 셀을 모두 찾습니다
//모든 td에서 학생번호 열의 셀 위치가 짝수(0, 2, 4, 6) 짝수를 통해 td
var numTd = $("tbody td:even")
//이 td를 클릭하면 텍스트 상자가 생성됩니다
numTd.click( function(){
//텍스트 상자 객체 생성
var inputobj = $("");
//현재 클릭한 항목 가져오기 cell object
var tdobj = $(this); 셀, 메서드에서 직접 점프
//참고: 텍스트 상자를 삽입하기 전에 반드시 판단하세요
if(tdobj.children("input").length>0){
return false ;
}
//셀 텍스트 지우기
tdobj.html("")
inputobj.css("border","0")
.css("font-size" ,tdobj.css("글꼴 크기 "))
.css("글꼴-가족",tdobj.css("글꼴-가족"))
.css("배경 색상",tdobj.css ("배경색"))
.css("색상","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj );
inputobj.get( 0).select();
//텍스트 상자의 클릭 이벤트 방지
inputobj.click(function(){
return false;
} );
});
});


위 버그는 해결되었는데, 셀을 클릭하면 표면의 색상이 바뀌는 것을 발견했습니다. 편집할 수 있다는 느낌이 들지 않습니다. 그런 다음 텍스트 상자를 삽입하는 동안 텍스트 상자에서 텍스트를 선택합니다.
코드 8:

코드 복사

코드는 다음과 같습니다. inputobj.get (0) .select();

그런데 Safari 브라우저에서는 텍스트 상자가 선택되려면 텍스트 상자에 포커스가 있는 것으로 나타나야 합니다. 하지만 여기서는 텍스트 상자를 삽입하고 셀을 클릭하면 텍스트 상자에 값을 할당합니다. 해결책: jQuery의 트리거 메소드를 통해 이벤트를 트리거하십시오.
Code9:

코드 복사

코드는 다음과 같습니다. inputobj.trigger( "focus" ).trigger("select");

3. 텍스트 상자 키 이벤트 처리
이제 위의 문제가 해결되었으므로 텍스트 상자에 몇 가지 주요 이벤트를 추가해 보겠습니다. 키 입력을 얻기 위한 keyCode는 브라우저마다 다르지만 jQuery는 이 문제를 해결하는 데 도움이 됩니다.
이벤트의 함수에 이벤트 매개변수를 추가하기만 하면 메소드 본문에서 이벤트 객체의 which 속성을 통해 keyCode를 얻을 수 있습니다. event.which 속성은 keyCode를 얻는 메소드를 동화합니다. 다른 브라우저에서.

keyCode를 얻은 후 주로 ESC 키(키 값: 27)와 Enter 키(키 값: 13) 두 가지 키 이벤트를 수행합니다.
Code10:




코드 복사

코드는 다음과 같습니다.

//텍스트 상자의 Enter 및 Esc 키 작업을 처리합니다.
//jQuery의 이벤트 메서드 기능은 이벤트 매개변수를 정의할 수 있으며 jQuery는 브라우저와 전달 사이의 차이를 차단합니다. 사용 가능한 이벤트 객체
inputobj.keyup(function(event){
//현재 키의 키 값을 가져옵니다
//키를 가져오는 jQuery 이벤트 객체에 which 속성이 있습니다. 키보드 키 값
var keycode = event.which;
//캐리지 리턴 처리
if(keycode==13){
//현재 텍스트 상자의 내용 가져오기
var inputtext = $(this ).val();
//td의 내용을 텍스트 상자의 내용으로 수정
tdobj.html(inputtext);
}
// esc 상황
if( keycode == 27){
//td의 내용을 텍스트로 복원
tdobj.html(text);
}
}); 🎜>
다음은 완전한 js 코드입니다:

Code11:

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

$( document).ready(function(){

//학번 열의 셀을 모두 찾습니다
//학생 열의 셀 위치가 다르기 때문에 모든 td의 숫자는 짝수(0,2,4,6)이므로 짝수
var numTd = $("tbody td:even") //이 td를 클릭하면 텍스트 상자가 생성됩니다.
numTd.click(function(){
//텍스트 상자 객체 생성
var inputobj = $("");
//현재 클릭한 유닛 Cell 객체 가져오기
var tdobj = $(this);
//셀의 텍스트 가져오기
var text = tdobj.html() ;
//현재 셀에 텍스트 상자가 있으면 메서드에서 바로 빠져나옵니다
//참고: 텍스트 상자를 삽입하기 전에 반드시 판단하세요
if(tdobj.children( "input").length>0){
return false;
}
//셀의 텍스트 지우기
tdobj.html("")
inputobj.css(" border","0")
.css("글꼴 크기",tdobj.css ("글꼴 크기"))
.css("글꼴-가족",tdobj.css("글꼴-가족 "))
.css("배경색",tdobj.css("배경색"))
.css("색상","#C75F3E")
.width(tdobj.width ())
.val(text)
.appendTo(tdobj)
inputobj.get(0).select()
//텍스트 상자의 클릭 이벤트 방지
inputobj.click(function(){
return false;
})
/ /텍스트 상자의 Enter 및 Esc 키 작업을 처리합니다.
//이벤트 메서드의 기능 jQuery는 이벤트 매개변수를 정의할 수 있습니다. jQuery는 브라우저 간의 차이점을 숨기고 사용 가능한 이벤트 객체를 전달합니다
inputobj.keyup(function(event){
//현재 키의 키 값 가져오기
/ /JQuery 이벤트 객체에 키보드 키의 키 값을 가져오는 which 속성이 있습니다
var keycode = event.
//캐리지 리턴 처리
if(keycode==13){
//현재 텍스트 상자의 내용 가져오기
var inputtext = $(this).val()>//td의 내용을 텍스트 상자의 내용으로 수정
tdobj.html; (inputtext);
}
//esc 상황 처리
if(keycode == 27){
//td의 내용을 텍스트로 복원
tdobj.html(text) ;
}
});
});
})



관련 문서 패키지 다운로드

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：자바스크립트 활용 스킬 모음 [권장]_javascript 스킬다음 기사：자바스크립트 활용 스킬 모음 [권장]_javascript 스킬

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved

수정하려면 표를 클릭하세요
000001	장산
;000002
000003	王五
000004