jQuery를 사용하여 편집 가능한 tables_jquery 구현

오늘은 jQuery를 사용하여 편집 가능한 테이블을 구현하는 예제를 배웠습니다. 이 예의 요구 사항은 다음과 같습니다. 내용을 수정하려면 전경 테이블의 셀을 클릭하고, 수정된 내용을 저장하려면 Enter를 누르고, 저장된 내용을 실행 취소하려면 Esc를 누르세요. 원칙: 클라이언트 테이블 셀을 클릭하면 셀에 텍스트 상자를 추가하고 셀의 원본 내용을 텍스트 상자에 할당한 다음 텍스트 상자 내용을 추가로 수정한 후 텍스트 상자 내용을 셀에 다시 할당합니다.

소스코드:

프론트엔드 코드:

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

BR>






< ; /script>--%>

🎜 >




학생번호 ;


>
>


;




CSS 코드:




코드 복사


코드는 다음과 같습니다.


body {
}
table {
border:1px solid #000000; border-collapse:collapse ;/*셀 테두리 병합*/
width:400px
}

table td { border:1px solid #000000; 너비:50%; } 테이블 th { border:1px solid #000000; width:50%;

}

tbody th {
배경 -color:#426fae;
}


jquery 코드




코드 복사


다음과 같습니다:

$(function () {
//테이블에서 첫 번째 tr을 제외한 모든 짝수 행을 찾습니다.
//tbody tr을 통해 모든 tr 요소를 반환하려면 even을 사용합니다.
$( "tbody tr:even").css("Background-color", "#ece9d8");
//모든 학생 번호 셀 찾기
var numId = $("tbody td:even");

//셀에 대한 마우스 클릭 이벤트 등록
numId.click(function () {
//현재 마우스 클릭에 해당하는 td를 찾습니다. 이는 해당 셀에 응답한 td에 해당합니다.
var tdObj = $(this);
//td에 텍스트 상자가 있는지 확인
if (tdObj.children("input").length>0) {
return false ;
}
//테이블의 내용 가져오기
var text = tdObj.html()
//td의 내용 지우기
tdObj.html(""); 🎜>//텍스트 상자 만들기
//텍스트 상자 테두리 제거
//텍스트 상자의 글꼴 크기를 표의 텍스트와 동일하게 설정
//배경 설정 텍스트 상자의 색상을 테이블의 배경색과 동일하게 합니다
. //텍스트 상자의 너비는 td의 너비와 같습니다
//td의 값을 텍스트 상자에 입력합니다.
//td에 텍스트 상자 삽입
var inputObj = $("").css("border-width", "0").css("font -size", tdObj.css("font-size")).css("배경색", tdObj.css("배경색")).width(tdObj.width()).val(text). appendTo(tdObj);
//텍스트 상자가 삽입된 후 먼저 포커스를 얻은 다음 선택합니다
inputObj.trigger("focus").trigger("select")
//클릭 텍스트 상자가 삽입된 후에는 이벤트가 트리거될 수 없습니다
inputObj.click(function () {
return false;
})//텍스트에서 Enter 및 Esc 키의 동작을 처리합니다. box
inputObj.keyup(function (event) {
//현재 누르고 있는 키보드의 키 값을 가져옵니다
var keycode = event.which;
//캐리지 리턴 처리
if ( keycode==13) {
//현재 텍스트 상자의 내용 가져오기
var inputtext = $(this).val ()
//td의 내용을 텍스트 내용으로 수정합니다. box
tdObj.html(inputtext);
}
//esc 내용 처리
if (keycode== 27) {
//td의 내용을 원본 내용으로 복원
tdObj.html(text);
}
});
})
})


요약: 다음을 통해 얻을 수 있는 지식 포인트 이 예에서 학습:

1. HTML

1.table에는 thead와 tbody가 포함될 수 있습니다.

2. 테이블 헤더의 내용은
에 배치될 수 있습니다.
3. 테이블{} 이 작성 방법을 레이블 선택기라고 하며 전체 테이블에 영향을 미칠 수 있습니다.

4.table td{}는 테이블에 포함된 모든 td를 나타냅니다.

2. jquery의 경우

$()는 괄호 안에 4개의 다른 매개변수를 넣을 수 있습니다.

1. 매개변수를 함수에 직접 넣어 페이지가 로드되었음을 나타냅니다. : 예를 들어 jquery 코드 $(function(){})

2의 위 예제 1번째 줄은 매개변수가 CSS 클래스 선택기일 수 있으며 jquery 객체로 패키징됩니다. 예: 위 예제에서 jquery 코드의 4번째 줄 $("tbody tr:even")

3. 매개변수가 HTML 텍스트인 경우 dom 노드를 생성하고 이를 jquery 객체로 패키징할 수 있습니다. . 예: 위 예제에서 jquery 코드의 27번째 줄 $("")

4. 매개변수는 dom 객체일 수 있습니다. dom 객체를 jquery 객체로 변환합니다. 위 예제의 jquery 코드 11번째 줄 var tdObj = $(this)

이 예제의 jquery 개체

1. jquery 개체 뒤에 CSS 속성을 추가하여 CSS 속성을 설정합니다. 노드. 예를 들어 위 예제의 jquery 코드에서 4번째 줄은 $("tbody tr:even").css("Background-color", "#ece9d8")

2.jquery 객체 콘텐츠에 선택 항목이 포함되어 있습니다. 장치에 해당하는 DOM 노드가 배열에 저장됩니다.

3. jquery 객체 뒤에 html 메서드를 추가하면 노드의 html 콘텐츠를 설정하거나 가져올 수 있습니다. 예를 들어 위 예제에서 jquery 코드의 17번째 줄은 var text = tdObj.html()

4입니다. jquery 객체 뒤에 val 메서드를 추가하면 노드의 값을 가져오거나 설정할 수 있습니다. 예를 들어 위 예에서 jquery 코드의 41번째 줄은 var inputtext = $(this).val()

5입니다. jquery 객체 뒤에 width 메서드를 추가하면 노드의 너비를 설정하거나 가져올 수 있습니다. . 예를 들어 위 예제에서 jquery 코드의 27번째 줄은 tdObj.width()

6입니다. jquery 객체 뒤에appendTo 메서드를 추가하면 다른 노드의 모든 하위 노드에 노드를 추가할 수 있습니다. 예를 들어, 위의 예에서 jquery 코드

7의 27번째 줄은 addTo(tdObj)입니다. jquery 객체 뒤에 트리거 메서드를 추가하면 js 이벤트가 발생할 수 있습니다. 예를 들어 위의 예에서 jquery 코드 inputObj.trigger("focus").trigger("select")

8의 29번째 줄은 jquery 객체 뒤에 자식 메서드를 추가하면 자식 노드를 얻을 수 있습니다. 특정 노드의 하위 노드의 내용을 제한하기 위해 매개변수를 공식화할 수 있습니다. 예를 들어 위 예제 tdObj.children("input").length

9에서 jquery 코드의 13번째 줄은 선택기에서 반환된 jquery 객체에 여러 dom 노드가 포함된 경우 유사한 클릭 이벤트를 등록합니다. 이 개체를 사용하면 모든 DOM 노드가 이 이벤트에 사용됩니다. 예를 들어 위 예의 jquery 코드에서 9행 numId.click을 입력합니다.

마우스를 클릭하면
000001	000002	이思	000003	王五