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

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

소스코드:

프론트엔드 코드:

코드 복사 코드는 다음과 같습니다. jq2—편집 가능한 테이블 &lt ; /script>--%>

🎜 > 마우스를 클릭하면 학생번호 ; 000001 > 000002 이思 > 000003 王五 ;

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을 입력합니다.