jquery 검색으로 테이블 행이 제거됩니다.

Question

검색 창과 같은 것을 만들고 싶습니다. 아래의 HTML 코드에서와 같이 텍스트 상자와 테이블에있다 : 내가 일치하는 값으로 테이블 행을 찾기 위해 jQuery를 사용할 수있는 방법

<input id="sbox" type="text" class="textbox" value=""></input> 
<table> 
    <tr><td>lemon</td></tr> 
    <tr><td>orange</td></tr> 
    <tr><td>watermelon</td></tr> 
    <tr><td>coconut</td></tr> 
</table> 

은. 예를 들어, 사용자에 대한 는 레몬에 입력하고, JQuery와는 "레몬"값과 디스플레이 테이블 행을 찾을 수 :

을 레몬 값이없는 없음 다른 결과는 다음과 같습니다

<input id="sbox" type="text" class="textbox" value=""></input> 
<table> 
    <tr><td>lemon</td></tr> 
    <tr style="display:none;"><td>orange</td></tr> 
    <tr style="display:none;"><td>watermelon</td></tr> 
    <tr style="display:none;"><td>coconut</td></tr> 
</table> 

Answer 1

나는 당신이 워싱턴 방법을 잘 모르겠어요 검색을 활성화하려면 "go"라는 ID를 가진 버튼을 사용하는 척할 것입니다. 이 같은 filter 사용할 수 있습니다

$('#go').click(function() { 
    var want = $.trim($('#sbox').val()); 
    $('table tr > td').filter(function() { 
     return $.trim($(this).text()) != want; 
    }).parent().hide(); 
}); 

데모 : http://jsfiddle.net/ambiguous/qWaDs/2/

당신은 대소 문자를 구분 검색하려는 경우 일부 toLowerCase 통화를 추가 할 수 있습니다

:

$('#go').click(function() { 
    var want = $.trim($('#sbox').val()).toLowerCase(); 
    $('table tr > td').filter(function() { 
     return $.trim($(this).text()).toLowerCase() != want; 
    }).parent().hide(); 
}); 

$.trim 호출이 필요를 귀하의 HTML이 다음과 같이 끝나는 경우 :

<tr> 
    <td> 
     lemon 
    </td> 
</tr> 
<!--...--> 

$.trim 행이나 셀을 사용하면 .text 반환 값에 원치 않는 공백이 생깁니다. 코드의 동작을 HTML의 정확한 형식에 너무 가깝게 바인딩 할 이유가 없습니다.

Answer 2

$('td') 
    .filter(function() { return $(this).text() != 'lemon'; }) 
    .closest('tr') 
    .hide() 

Answer 3

사용이 코드,

$("tr").hide(); 
$("td:contains('lemon')").parents('tr').show();