《날카로운 jQuery》 요점 귀납 (4) jQuery가 폼, 표에 대한 조작 및 더 많은 응용 (중: 표 응용)
20350 단어 jquery
2. 표 응용
1 표 칸막이 변색 (:odd 및: 이벤트 선택기 P157)
$(
function
(){
$(
"
tr:odd
"
).addClass(
"
odd
"
);
//
$(
"
tr:even
"
).addClass(
"
even
"
);
//
（:odd :even 0 ）
})
2 지정한 텍스트 내용을 포함하는 줄의 변색을 설정합니다 (: contains 선택기 P158)
$(
function
(){
$(
"
tr:contains(' ')
"
).addClass(
"
selected
"
);
})
3 단일 선택 상자에서 테이블 행 강조(find() 방법을 제어합니다.radio,: checked,:has 선택기 P158)
//
DOM ：<table><tr><td><input type="radio" /></td></tr>...</table>
$(
function
(){
$(
"
tr
"
).click(
function
(){
$(
this
).addClass(
"
selected
"
).siblings().removeClass(
"
selected
"
).end()
.find(
"
:radio
"
).attr(
"
checked
"
,
true
);
$(
"
table :radio:checked
"
).parent().parent().addClass(
"
selected
"
);
//
//
$("table :radio:checked").parent("tr").addClass("selected");
//
$("tbody>tr:has(:checked)").addClass("selected");
});
})
4 복선상자는 표 줄의 하이라이트를 제어한다(:has 선택기,hasClass() 방법으로 P160을 판단한다)
$(
"
tr:has(:checked)
"
).addClass(
"
selected
"
);
//
，
$(
"
tr
"
).click(
function
(){
if
($(
this
).hasClass(
"
selected
"
)){
//
$(
this
).removeClass(
"
selected
"
).find(
"
:checkbox
"
).attr(
"
checked
"
,
false
);
}
else
{
$(
this
).addClass(
"
selected
"
).find(
"
:checkbox
"
).attr(
"
checked
"
,
true
);
}
})
//
：
$(
"
tr
"
).click(
function
(){
var
hasSelected
=
$(
this
).hasClass(
"
selected
"
);
$(
this
)[hasSelected
?
"
removeClass
"
:
"
addClass
"
](
"
selected
"
)
.find(
"
:checkbox
"
).attr(
"
checked
"
,
!
hasSelected);
//
：$(this)["addClass"]("selected"); $(this).addClass("selected");
})
5 표 전개 닫기(toggleClass()와 toggle() 방법;P161 속성 팁 사용) DOM은 다음과 같습니다.
<
table
>
<
tr
class
="parent"
id
="row_01"
><
td
>
1
</
td
></
tr
>
<
tr
class
="child_row_01"
><
td
>
1
</
td
></
tr
>
<
tr
class
="parent"
id
="row_02"
><
td
>
2
</
td
></
tr
>
<
tr
class
="child_row_02"
><
td
>
2
</
td
></
tr
>
</
table
>
$(
function
(){
$(
"
tr.parent
"
).click(
function
(){
$(
this
).toggleClass(
"
selected
"
).siblings(
"
.child_
"
+
this
.id).toggle();
});
})
6 테이블 컨텐트 필터링 디스플레이(filter) 메서드 P163)
$(
function
(){
$(
"
tr
"
).hide().filter(
"
:contains(' ')
"
).show();
})
7 테이블 컨텐트를 입력으로 필터링(P163)
$(
function
(){
$(
"
#filterName
"
).keyup(
function
(){
$(
"
tr
"
).hide().filter(
"
:contains('
"
+
($(
this
).val())
+
"
')
"
).show();
}).keyup();
//
DOM ， ，
})
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
