일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 아이폰
- 추천
- 후기
- 모뉴먼트
- 아이패드
- 핑크
- 아이폰게임
- 감상
- php
- 공략
- 유료
- 강추
- Pink
- 잡담
- 가사
- goblin sword
- 카이로소프트
- 아이러브니키
- 모뉴먼트 밸리
- 영화
- jQuery
- great forest
- 시사회
- JavaScript
- 맛집
- 일상
- 게임
- Monument Valley
- Monument
- 레고
- Today
- Total
잡담소장소
jQuery를 이용한 테이블의 같은 값 찾기 - in PHP 본문
테이블에서 선택한 하나의 값과 같은 값들을 표시해줘야 하는 일이 생겼다.
동적으로 해야 하므로 일전부터 공부해보고 싶었던 jQuery를 이용하기로 마음먹었다
//페이지 시작되면 바로 실행되도록 하는 .ready()
$(document).ready(function()
{
//td는 링크가 아니기 때문에 css로 손 모양으로 만들어준다.
// hand 로 줄경우 IE에서만 동작하므로 pointer로 설정
//class가 search 이면 실행
$(".search").css("cursor", "pointer");
$(".search").bind("click", function(e)
{
//class가 search 인 값을 클릭하면 search_same이라는 함수를 동작시킨다.
//함수 실행시 e 라는 값을 받아서 해당 이벤트의 target의 text를 가져온다.
//input 같은 경우 value라는 값이 있어서 val() 로 가져오지만 td는 안의 내용이 필요하므로 text()로 가져온다.
search_same($(e.target).text());
});
});
function search_same(value)
{
//일단 css 초기화
$(".search").css("background", "white").css("font-weight", "normal");
//테이블이 여러개 이기 때문에 id가 print_login_log인 테이블의 td에서만 실행
$("#print_login_log td").each(function ()
{
//해당 테이블의 td모두 검색해서 받아온 값과 같은 값이면 아래 css 실행
if($(this).html() == value)
{
$(this).css("background","yellow").css("font-weight","bolder");
}
});
}
//아이피는 앞에 3자리만 구분해야되서 소스 수정 -_-;;
function search_same(value)
{
$(".search").css("background", "white").css("font-weight", "normal");
$("#print_login_log td").each(function ()
{
//value에 "."이 있으면 ip로 간주. 그 외에는 바로 css 적용
if(value.indexOf(".") == -1)
{
$("#print_login_log td:contains("+value+")").css("font-weight", "bolder").css("background", "yellow");
}
else
{
var search_val = value.split('.');
value = "";
for(var i=0; i<search_val.length-1; i++)
{
value += search_val[i];
value += ".";
}
//여러개의 css 대신 한번에 붙였다. font-color 라는 css 는 없다 ^^;;
/* $("#print_login_log td:contains("+value+")").css("font-weight", "bolder").css("background", "yellow").
*/
$("#print_login_log td:contains("+value+")").css({'font-weight':'bolder', 'background':'yellow', 'color':'red'});
}
});
}
//확정판 ㅠ.,ㅠ
function search_same(value)
{
$(".search").css({'font-weight':'normal', 'background':'white', 'color':'black'});
$("#print_login_log td").each(function ()
{
var td_str = $(this).text();
if(value.indexOf(".") == -1 && td_str.indexOf(".") == -1)
{
$("#print_login_log td:contains("+value+")").css("font-weight", "bolder").css("background", "yellow");
}
else
{
// 깔끔하게 split 함수 한줄로 끝냈다 ;ㅁ;
var search_val = value.split('.', 3);
value = search_val.join('.'); //추가 (배열을 구분자를 두어 문자열로 변환)
$("#print_login_log td:contains("+value+")").css("font-weight", "bolder").css("background", "yellow");
}
});
} * $("#print_login_log").find("td[class='search']").addClass("not_match"); 이런방법으로 클래스를 추가하거나 삭제할 수 있다 'ㅁ'
* 하면서 실수했던건 click 이벤트 발생시킬 때 bind가 아니라 one으로 하는 바람에
이벤트가 한번만 발생하고 그 뒤로 발생하지 않았다 ㅠ_ㅠ
* 아이디 구분하는게 헷갈렸다. #는 id, .는 class, 없으면 input이나 div 같은 컨트롤 이름
one함수 때문에 고생하긴 했지만 공부하는 내내 진짜 재밌게 했다 ㅋㅋㅋㅋ
'Study ;3' 카테고리의 다른 글
효과적인 보고서 쓰기 (0) | 2010.10.28 |
---|---|
jQuery를 이용한 visibility (1) | 2010.10.06 |
Encrypt & Decrypt in PHP (0) | 2010.09.17 |
정규식을 이용한 검색 및 파일 쓰기 in PHP (0) | 2010.09.03 |
RegEx in PHP (0) | 2010.08.30 |