본문 바로가기

Javascript/Jquery

table option selected(테이블 option 선택)

반응형

table에서 option 태그에서 원하는 옵션 선택한 것만 볼수 있게 하는 코드

  • js코드
<script>
        $(document).ready(function() {
        function addRemoveClass(theRows){
                theRows.removeClass("odd even");
                theRows.filter(":odd").addClass("add");
                theRows.filter(":even").addClass("even");
            }
            var rows = $("table.boss-table tr:not(:first)");
            addRemoveClass(rows);
            $(".type-1").on("change",function(){
                var selected = $('.type-1').val();
                if(selected != "모두보기"){
                    rows.filter(":has(td:nth-child(4):contains("+selected+"))").show();
                    rows.not(":has(td:nth-child(4):contains("+selected+"))").hide();
                }else{
                    rows.show();
                    addRemoveClass(rows);
                }  
              })
           });
</script>

$(".type-1").on("change",function(){     // 코드에서 .type-1를 본인이 select 태그에 클래스나 id값을 줘서 그 값으로

                                                     변경 해주면 됨.

rows.filter(":has(td:nth-child(4):contains("+selected+"))").show();     //코드에서 몇번째 td를 option 값과 같은 단어를

                                                                                         찾을지 설정 해주면 됨.

  • html코드
<select class="type-1">
                    <option value="모두보기">모두보기</option>
                    <option value="필드">필드</option>
                    <option value="던전">던전</option>
                </select>

 

반응형

'Javascript > Jquery' 카테고리의 다른 글

마우스 오버시 이미지 확대  (0) 2020.08.04
table option selected(테이블 option 선택)  (0) 2020.07.18
jquery 테이블 정렬 코드  (0) 2020.07.08
Jquery 선택자  (0) 2020.05.21