새로운 날이 시작되었고 삶은 계속됩니다. 오늘 여러분과 공유하고 싶은 것은 다른 테이블입니다. 일반적인 테이블을 사용하여 데이터를 표시합니다. 오늘 공유하고 싶은 테이블은 데이터를 표시할 수 있을 뿐만 아니라 데이터를 편집할 수도 있습니다. 데이터를 마우스로 클릭하면 해당 데이터 그리드가 편집 가능해집니다. 먼저 오늘의 주제를 살펴보겠습니다.
JQueryProject1<br> <meta name="author" content="Frank_Ren" /> <br><link type="text/css" rel="stylesheet" href="css/myCSS.css" /> ;스크립트 유형 ="text/javascript" src="js/jquery-1.8.1.min.js"></script> <br><script type="text/javascript" 언어="JavaScript" src ="js /myJSFile.js"></script> <br><!-- 날짜: 2012-09-17 --> <br></head> 🎜>< ;table> <br><thead> <br><tr> <br><th colspan="2">편집하려면 다음 내용을 클릭하세요. <br>< ;/tr> <br></thead> <br><tr><br>학생 ID<br>< 일>이름</tr> <br><tr> <br><td>000001</td> > <br><tr> <br><td>000002</td> <br><td></td>
<br><td>000003 <br>
</td>
<td></td> <br>
</tr> <br><td><br></td>
<td> ;조류</td> <br></tbody> <br></body> <br> <br>네, 여전히 스타일이 전혀 없는 평범한 테이블입니다. 이 테이블을 덜 추상적으로 만들기 위해 CSS 스타일을 도입하겠습니다. <br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다:<br><br> <br>table{ <br>width:400px height: 150px; 테이블, 테이블 td, 테이블 th{ <br>테두리:1px 단색 검정; <br>테두리 축소: 축소 <div class="codetitle">} <span>테이블 td{ <a style="CURSOR: pointer" data="70841" class="copybut" id="copybut70841" onclick="doCopy('code70841')"> 너비: <u>높이: 25px ; </u>} </a>thead th{ </span> background-color:#87CEFA </div>} <div class="codebody" id="code70841">tbody th{ <br> background-color:# FFFACD; > <br>HTML 페이지에는 편집 가능한 페이지 요소가 몇 개밖에 없습니다. 아쉽게도 테이블을 편집 가능하게 만들려면 테이블에 편집 가능한 페이지 요소를 삽입한 다음 장식해야 합니다. CSS를 사용하여 일반 테이블처럼 보이도록 하지만 JS 코드는 다음과 같습니다. <br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><br> <br>$(function(){ <br>var content; <br>$( "#content tr:odd").css( "배경색","#D2B48C"); <br>$("#content tr:even").css("배경색","#C0C0C0") <br>$("#content td" ).click(function(){ <br>var clickObj = $(this); <br>content = clickObj.html(); </div>changeToEdit(clickObj); <br>}); 노드){ <br>node.html(""); <div class="codetitle">var inputObj = $("<input type='text'/>") <span>inputObj.css("border","0 ").css("배경색",node.css("배경색")) <a style="CURSOR: pointer" data="48814" class="copybut" id="copybut48814" onclick="doCopy('code48814')">.css("글꼴 크기",node.css(" 글꼴 크기")).css("높이 ","20px") <u>.css("width",node.css("width")).val(content).appendTo(node) </u>.get(0).select(); </a>inputObj.click(function(){ </span>return false; </div>}).keyup(function(event){ <div class="codebody" id="code48814">var keyvalue = event.which; <br>if(keyvalue==13){ <br>node.html(node.children("input").val()); <br>} <br>if(keyvalue==27){ <br>node .html(content) <br>} <br>}).blur(function(){ <br>if(node.children("input").val()!=content){ <br>if(confirm ("수정된 콘텐츠를 저장하시겠습니까? ","예","아니요")){ <br>node.html(node.children("input").val()); <br>}else{ <br>node.html(content); <br>} <br>}else{ <br>node.html(content) <br>} <br>}) <br>} <br>});<br> 다음으로 이 JS에 대한 간단한 분석을 해보겠습니다. 전역 변수 var content는 편집하기 전에 테이블의 내용을 저장하는 데 사용됩니다. 사용자가 테이블을 편집하지만 편집된 결과를 저장하고 싶지 않을 때가 있습니다. 테이블을 저장하려면 편집하기 전에 테이블의 내용이 복원되므로 마우스 클릭 시 테이블의 내용을 먼저 저장해야 합니다. <br><br>다음 두 문장 $("#content tr:odd").css("Background-color","#D2B48C") $("#content tr:even").css("배경 -color","#C0C0C0");은 테이블의 가시성을 높이기 위해 테이블에 대체 행 색상을 적용하는 것입니다. var inputObj = $("<input type='text'/>"); 이 문장은 편집 가능한 JQuery 객체를 생성하는데, 이는 편집 가능한 요소를 테이블에 삽입하는 것입니다. CSS를 추가하는 것입니다. .css() 메소드는 객체의 CSS 스타일을 설정할 수 있을 뿐만 아니라 객체의 CSS 스타일도 얻을 수 있습니다. JQuery 메소드가 실행된 후 JQuery 객체가 반환되는 경우가 많기 때문에 inputObj.css().css().css()....가 나타납니다. <br><br>appendTo() 메서드는 테이블의 편집 가능성을 실현하고(appendix()도 사용할 수 있음) 편집 가능한 요소를 테이블에 삽입합니다. .get(0).select() 두 가지 메소드는 편집 가능한 요소에 초점이 맞춰지도록 inputObj의 콘텐츠를 선택하는 데 사용됩니다. 이 두 메소드는 반드시appendTo(), inputObj.click( function(){}) 메서드도 중요합니다. 이 메서드를 삭제하면 흥미로운 버그가 발생합니다. <br><br>다음 keyup(function(event){})을 사용하면 event.which를 통해 키보드에서 누른 키에 해당하는 키 값을 얻을 수 있습니다. 일반적으로 사용되는 키 값에는 Enter 키: 13, Esc 키 :27. Enter 키를 누르면 편집된 내용이 저장되고 테이블은 일반 테이블로 복원됩니다. Esc 키를 누르면 테이블의 내용이 복원되고 테이블이 원래 테이블로 복원됩니다. 일반 테이블. <br><br>사용자 경험, Apple의 등장으로 이 단어가 더욱 유명해졌고, 우리도 그 즐거움에 동참하기 위해 왔습니다. 사용자 경험을 향상시키기 위해 여기에는 Blur(function(){}) 메서드가 추가되었습니다. 포커스가 편집 가능한 요소를 벗어나면 먼저 테이블의 내용이 변경되었는지 확인하고 변경 사항이 없으면 직접 복원합니다. 테이블과 테이블의 내용이 변경된 경우 사용자에게 저장할지 묻는 메시지를 표시합니다. <br><br>오늘의 예제는 기본적으로 완성되었습니다. 별도의 JS 파일에서 JS 코드를 참조하면 중국어로 왜곡된 버그가 나타날 수도 있습니다. 이 글을 읽어주셔서 감사드리며, 도움이 되셨으면 좋겠습니다.</div>
</td>
