jquery 연구 노트 2: 편집 가능한 tables_jquery 구현

편집 가능한 테이블 데모 구현:

예시 사진:

" -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

>
테이블
{
테두리: 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 속성은 키보드 정보를 저장한다는 의미입니다.