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

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

예시 사진:

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

을 호출합니다. //tbody의 짝수 tr 배경색을 #ECE9D8 $("tbody tr:even")으로 설정합니다. .css(" background-color", "#ECE9D8");

//tbody의 짝수 td를 numTd로 설정

var numTd = $("tbody td:even")// 다음 셀 제공 마우스 클릭 이벤트 등록
numTd.click(function() {
//클릭한 요소의 jquery 객체 가져오기
var tdObj = $(this);
//If the 클릭한 요소에 입력이 포함되어 있습니다. 컨트롤이 클릭 처리를 수행하지 않습니다
if (tdObj.children("input").length > 0) {
return false
}
//Get the td content; 텍스트에 값을 추가합니다.
var text = tdObj.html();
//td에서 내용 지우기
tdObj.html("")//텍스트 상자 만들기, 제거 텍스트 상자의 테두리를 설정하고 텍스트 상자를 설정합니다. 텍스트 글꼴 크기는 16px입니다.
//텍스트 상자의 너비를 td의 너비와 동일하게 만들고 텍스트 상자의 배경색을 설정합니다. 현재 td의 내용을 텍스트 상자에 넣어야 합니다
//텍스트 상자 배치 td에 삽입
var inputObj = $("").css(" 테두리 너비", "0")
.css("글꼴 크기", "16px").width(tdObj.width())
.css("배경색", tdObj.css( "ground-color"))
.val(text).appendTo(tdObj)
//먼저 포커스 이벤트를 트리거한 다음 선택 이벤트를 트리거하도록 트리거를 설정합니다
inputObj.trigger("focus" ).trigger("select");
//텍스트 상자가 삽입된 후 선택됩니다
inputObj.click(function() {
return false;
}); //키업 이벤트 등록
inputObj.keyup(function(event) {
//현재 누른 키보드 키 값 가져오기
var keycode = event.which;
//캐리지 리턴 처리
if (keycode == 13) {
//현재 텍스트 상자의 내용 가져오기
var inputtext = $(this).val()
//td의 내용을 텍스트 상자
tdObj.html(inputtext);
}
//esc 처리
if (keycode == 27) {
//td의 내용을 텍스트로 복원
tdObj.html(text);
}
})
>
테이블
{
테두리: 1px 단색 검정
테두리 축소:
폭: 400px;
}
테이블 td
>테두리: 1px 단색 검정;
너비: 50%;
}
테이블
{
테두리: 1px 단색 검정;
너비: 50%; 🎜>tbody th
{
background-color:
}

form id="form1" runat="server">

테이블 항목을 마우스로 클릭하여 편집하세요
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 속성은 키보드 정보를 저장한다는 의미입니다.