잡담소장소

jQuery를 이용한 테이블의 같은 값 찾기 - in PHP 본문

Study ;3

jQuery를 이용한 테이블의 같은 값 찾기 - in PHP

알 수 없는 사용자 2010. 10. 5. 11:06






테이블에서 선택한 하나의 값과 같은 값들을 표시해줘야 하는 일이 생겼다.
동적으로 해야 하므로 일전부터 공부해보고 싶었던 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").

css("font-color", "red");
        */
        $("#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
Comments