dataKeyword가 일치하는 경우 확인란에서 테이블 행 표시 또는 숨기기

일련의 확인란이 있는데 "데이터 키워드"변수가 선택되어 있는지 확인합니다. 테이블 행() 내의 문자열 내에서 해당 변수를 찾고 해당 행이 표시되는지 여부에 따라 해당 행을 표시하거나 숨길 수 있어야합니다.dataKeyword가 일치하는 경우 확인란에서 테이블 행 표시 또는 숨기기

체크 박스 레이아웃 :

<input type="checkbox" name="make" data-heading="Make" data-keyword="Acura" /> 
<label>Acura</label><span class="count">(585)</span> <br /> 
<input type="checkbox" name="make" data-heading="Make" data-keyword="Audi" /> 
<label>Audi</label><span class="count">(319)</span> <br /> 
<input type="checkbox" name="make" data-heading="Make" data-keyword="BMW" /> 
<label>BMW</label><span class="count">(958)</span> <br />

표 행 레이아웃 :

<tr sn="8126789" v_loc="7279" index="0" class="car-search-result"> 
<td class="tcol-1"> <a name="8126789" /> <img class="clicked" data-thumbnail="/8126789-3-1-48f0a71c.jpg" src="/8126789-3-1-48f0a71c.jpg" alt="" /> </a> 
<div> 
    <label> Compare </label> 
    <input type="checkbox" id="" class="compare_click" name="" /> 
</div> 
</td> 
<td class="tcol-2"> 
<h5 data-header="2006 Acura MDX "> 
    <a href=""> 2006 Acura MDX </a> 
</h5> 
<ul> 
    <li><span>Leather Seats, 3rd Rear Seat, Sunroof(s)<a>more...</a></span></li> 
</ul> 
<ul class="list"> 
    <li> <label> Miles</label> </li> 
    <li> <label> Drive</label>4WD </li> 
    <li> <label> Trans</label>Automatic </li> 
    <li> <label> MPG</label> </li> 
    <li> <label> Exterior</label>Gray </li> 
    <li> <label> Interior</label>Gray </li> 
    <li> <label> 
    <div> 
     8 Reviews 
    </div> 
    </label> <img alt="4.8 out of 5" src="rating-4_8.gif"> </li> 
</ul> 
<div class="more_equipment"> 
    More equipment and specifications 
</div> 
</td> 
<td class="tcol-3"> 
<div class="res_sort_mileage" data-keyword="90K"> 
    90K 
</div> 
</td> 
<td class="tcol-4"> 
<div style="position:relative;"> 
    <div> 
     <span class="res_sort_price" data-keyword="$16,599"> $16,599</span> 
    </div> 
    <div> 
     Current Location<span class="res_current_location" data-keyword="location"> location</span> 
    </div> 
    <div class="btn_see_more_details"> 
    </div> 
    <div class="btn_save_this_car"> 
    </div> 
</div> 
</td> 
</tr>

확실하지 않음 사전에 감사이를 설정하는 방법!

출처

2012-08-22 user1599161

그래서 나는 시도 (dataKeyword은 내가 설정 한 VAR 인) : 여기

$('input').live('click',function() { $('.car-search-result').each(function(i) { var keyword = $(this).attr('data-keyword'); var checked = $('input[data-keyword="'+keyword+'"]').is(':checked'); if(checked) { $(this).show(); } else { $(this).hide(); } }); });

는 행동에서 볼 수있는 jsFiddle에 대한 링크입니다 2 h5 : contains (' "+ dataKeyword +"') ") 각 (function() { $ (this) .closest ("tr ") show(); }); – user1599161

당신은 체크 표시가 보이기를 원합니까? 체크하지 않으려면 체크 표시를 숨기거나 그 반대입니까? –

나는 그런 다음 체크 박스에 클릭을 듣고 표시하고 각 클릭에 사라질 행을 전환 할 수 있어야 다음

<tr data-keyword="Acura" ...

같은 테이블 행에 data-keyword 속성을 추가 추천 할 것입니다. $ ("tablesorter에 TR td.col- :. http://jsfiddle.net/Um7rC/

출처

2012-08-22 19:04:20

이것은 내가 찾고있는 것입니다! 감사! 에 데이터 키워드를 추가 할 생각조차하지 않았습니다. – user1599161

dataKeyword가 일치하는 경우 확인란에서 테이블 행 표시 또는 숨기기

답변

관련 문제