편집 가능한 테이블 데모 구현: 예시 사진: " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <u>//단순화 준비 작성 방법: 페이지가 로드되면 </u>$(function() { </a>을 호출합니다. //tbody의 짝수 tr 배경색을 #ECE9D8 </span>$("tbody tr:even")으로 설정합니다. .css(" background-color", "#ECE9D8"); </div>//tbody의 짝수 td를 numTd로 설정 <div class="codebody" id="code17724">var numTd = $("tbody td:even")// 다음 셀 제공 마우스 클릭 이벤트 등록 <br>numTd.click(function() { <br>//클릭한 요소의 jquery 객체 가져오기 <br>var tdObj = $(this); <br>//If the 클릭한 요소에 입력이 포함되어 있습니다. 컨트롤이 클릭 처리를 수행하지 않습니다 <br>if (tdObj.children("input").length > 0) { <br>return false <br>} <br>//Get the td content; 텍스트에 값을 추가합니다. <br>var text = tdObj.html(); <br>//td에서 내용 지우기<br>tdObj.html("")//텍스트 상자 만들기, 제거 텍스트 상자의 테두리를 설정하고 텍스트 상자를 설정합니다. 텍스트 글꼴 크기는 16px입니다. <br>//텍스트 상자의 너비를 td의 너비와 동일하게 만들고 텍스트 상자의 배경색을 설정합니다. 현재 td의 내용을 텍스트 상자에 넣어야 합니다 <br>//텍스트 상자 배치 td에 삽입 <br>var inputObj = $("<input type='text'>").css(" 테두리 너비", "0") <br>.css("글꼴 크기", "16px").width(tdObj.width()) <br>.css("배경색", tdObj.css( "ground-color")) <br>.val(text).appendTo(tdObj) <br>//먼저 포커스 이벤트를 트리거한 다음 선택 이벤트를 트리거하도록 트리거를 설정합니다<br>inputObj.trigger("focus" ).trigger("select"); <br>//텍스트 상자가 삽입된 후 선택됩니다<br>inputObj.click(function() { <br>return false; <br>}); //키업 이벤트 등록<br>inputObj.keyup(function(event) { <br>//현재 누른 키보드 키 값 가져오기<br>var keycode = event.which; <br>//캐리지 리턴 처리<br> if (keycode == 13) { <br>//현재 텍스트 상자의 내용 가져오기<br>var inputtext = $(this).val() <br>//td의 내용을 텍스트 상자<br>tdObj.html(inputtext); <br>} <br>//esc 처리 <br>if (keycode == 27) { <br>//td의 내용을 텍스트로 복원 <br> tdObj.html(text); <br>} <br>}) <br> > 테이블 { 테두리: 1px 단색 검정 테두리 축소: 폭: 400px; } 테이블 td >테두리: 1px 단색 검정; 너비: 50%; } 테이블 { 테두리: 1px 단색 검정; 너비: 50%; 🎜>tbody th { background-color: } form id="form1" runat="server"> 테이블 항목을 마우스로 클릭하여 편집하세요 >일> tr> 🎜> < /tr> 조류< ;/tr> 지식 포인트: 1.$(function() {})는 $(document).ready(function() {})의 약어입니다. 2. $("tbody td:even")의 ":"은 필터링을 의미하며 even은 도움말 문서의 선택기에서 찾을 수 있습니다. 이 문장은 tbody에 짝수 td를 반환한다는 뜻이고, 그 결과는 집합이다. 3. $(this)는 이 컨트롤의 jquery 객체를 반환합니다. 4.children("input")은 하위 요소에 입력이 포함된 모든 jquery 객체를 가져오는 것을 의미하며 결과는 컬렉션입니다. 5.css("border-width", "0")은 CSS 속성의 값을 설정하는 것을 의미합니다. 6.trigger("focus").trigger("select")는 설정 이벤트가 포커스를 먼저 트리거한 다음 선택을 트리거한다는 의미입니다. 7.keyup(function(event) {var keycode = event.which;})는 키보드 이벤트를 등록한다는 의미이며, 이벤트 매개변수의 which 속성은 키보드 정보를 저장한다는 의미입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
