jQuery는 IE, Firefox, Safari, Chrome, Opera_jquery를 지원하여 브라우저 간 편집 가능한 테이블을 단계별로 구현합니다.
- WBOY원래의
- 2016-05-16 18:47:311280검색
편집 가능한 테이블 기능을 구현하려면 다음 문제를 해결해야 합니다.
1. 테이블에서 수정할 데이터가 어떤 열인지 명확히 합니다(이러한 셀을 찾는 방법).
2. 편집 가능
3. 셀의 일부 주요 이벤트를 처리하는 방법
4.
jQuery를 통해 위의 문제를 차근차근 해결할 수 있습니다.
1. 표 그리기
먼저 표를 그립니다. " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| 수정하려면 표를 클릭하세요 | |
|---|---|
| 000001 | 장산 |
| ;000002 | ;000003 |
王五 | 000004 |
아래와 같이 표시됩니다. 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); }); }) ; 그러나 위의 코드는 매우 번거로워 보입니다. 연쇄. 위 코드는 다음과 같이 연결하여 단순화할 수 있습니다.
코드 복사 코드는 다음과 같습니다. $(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 |
위 버그의 원인은 무엇인가요? 텍스트 상자에 셀을 삽입한 후에는 텍스트 상자가 셀에 속하기 때문에 텍스트 상자를 클릭하면 셀의 클릭 이벤트도 트리거됩니다.