Exibir / Esconder linhas de tabela com Jquery

[michelmfreitas 1]

Olá pessoal, gostaria de exibir somente as linhas de minha tabela HTML que possuam um determinado valor.

 

Por exemplo, item "Japão".

 

Ao clicar no selectbox com o item Japão, a tabela só pode mostrar itens que possuam a palavra "Japão" na coluna em questão. (Como se fosse um filtro do Excel).

 

Como faço isso com JQuery?

 

tentei da seguinte forma, porém não deu certo:

 

$('td', '.tabela').filter(function(){
       return $(this).text == item;
   }).hide();

 

Sendo que minha tabela é:

 

<table class='tabela'>
<tr>
	<td>
		<select>
			<option value='' onClick='mostraValor("planeta")'>planeta</option>
			<option value='' onClick='mostraValor("Terra")'>Terra</option>
		</select>
	</td>
	<td>
		<select>
			<option value='' onClick='mostraValor("continente")'>continente</option>
			<option value='' onClick='mostraValor("Asia")'>Asia</option>
			<option value='' onClick='mostraValor("America do Norte")'>America do Norte</option>
			<option value='' onClick='mostraValor("Europa")'>Europa</option>
			<option value='' onClick='mostraValor("America do Sul")'>America do Sul</option>
		</select>
	</td>
	<td>
		<select>
			<option value='' onClick='mostraValor("país")'>país</option>
			<option value='' onClick='mostraValor("Japão")'>Japão</option>
			<option value='' onClick='mostraValor("China")'>China</option>
			<option value='' onClick='mostraValor("USA")'>USA</option>
			<option value='' onClick='mostraValor("Canadá")'>Canadá</option>
			<option value='' onClick='mostraValor("Itália")'>Itália</option>
			<option value='' onClick='mostraValor("Inglaterra")'>Inglaterra</option>
			<option value='' onClick='mostraValor("Espanha")'>Espanha</option>
			<option value='' onClick='mostraValor("Brasil")'>Brasil</option>
			<option value='' onClick='mostraValor("Chile")'>Chile</option>
		</select>
	</td>
	<td>
		<select>
			<option value='' onClick='mostraValor("estado")'>estado</option>
			<option value='' onClick='mostraValor("1")'>1</option>
		</select>
	</td>
	<td>
		<select>
			<option value='' onClick='mostraValor("cidade")'>cidade</option>
			<option value='' onClick='mostraValor("1")'>1</option>
		</select>
	</td>
</tr>
<tr>
	<td>planeta</td>
	<td>continente</td>
	<td>país</td>
	<td>estado</td>
	<td>cidade</td>
</tr>
<tr>
	<td>Terra</td>
	<td>Asia</td>
	<td>Japão</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>Asia</td>
	<td>China</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>America do Norte</td>
	<td>USA</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>America do Norte</td>
	<td>Canadá</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>Europa</td>
	<td>Itália</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>Europa</td>
	<td>Inglaterra</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>Europa</td>
	<td>Espanha</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>America do Sul</td>
	<td>Brasil</td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td>Terra</td>
	<td>America do Sul</td>
	<td>Chile</td>
	<td>1</td>
	<td>1</td>
</tr>
</table>

[Lucas Peperaio 20]

Usa o :contains do Jquery.

Ex:

 

$(function(){
$("table tbody tr td:contains('japao')").hide(500);
})

 

Adpte ai as suas necessidades

[michelmfreitas 1]

Usa o :contains do Jquery.

Ex:

 

$(function(){
$("table tbody tr td:contains('japao')").hide(500);
})

 

Adpte ai as suas necessidades

 

Opa, funcionou sim, escondeu TODAS as linhas que não possuíam o item, porém eu quero que mostre a linha toda, ele apenas mostrou a célula em que havia o item. Como faço pra mostrar a linha que contém o item?

 

function mostraValor(item){
   $("table tr td").hide();
   $("table tr td:contains("+item+")").show();
}

[douglash 0]

$("table tr").hide();
$("table tr td:contains("+item+")").parent().show();

 

Acho q é isso.