Masquer la ligne du tableau en fonction du contenu de la cellule du tableau

Question

Je souhaite créer un fichier jQuery qui affiche des lignes de tableau et en masque d'autres en fonction du contenu de la première cellule de tableau de chaque ligne. Lorsque je clique sur un élément de la liste, je veux que jQuery vérifie si la première lettre de l'élément correspond à la première lettre d'une cellule de mon balisage, si c'est le cas, la ligne parent doit être masquée.

Ceci est mon balisage:

<ul> 
<li>A</li> 
<li>B</li> 
<li>G</li> 
</ul> 

<table> 

<tr> 
<td>Alpha1</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Alpha2</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Alpha3</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Beta1</td> 
<td>Some content</td> 
</tr> 
<tr> 
<td>Beta2</td> 
<td>Some content</td> 
</tr> 
<tr> 
<td>Beta3</td> 
<td>Some content</td> 
</tr> 


<tr> 
<td>Gamma1</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Gamma2</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Gamma3</td> 
<td>Some content</td> 
</tr> 
</table> 

Donc, si je presse le bouton « A » c'est ce qui est rendu dans le navigateur:

<ul> 
<li>A</li> 
<li>B</li> 
<li>G</li> 
</ul> 

<table> 

<tr> 
<td>Alpha1</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Alpha2</td> 
<td>Some content</td> 
</tr> 

<tr> 
<td>Alpha3</td> 
<td>Some content</td> 
</tr> 

</table> 

Je suis vraiment nouveau à jQuery donc aucune indication sur comment faire pour un problème comme celui-ci serait apprécié :)

Answer 1

Sotris est presque correct dans sa réponse. Je crois que ce que vous voulez est:

$('li').click(function() { 
    var letter = $(this).text(); 
    $("td").hide(); 
    $("tr").each(function(){ 
     if ($("td:first:contains('" + letter + "')", this).length != 0) { 
      $('td', this).show(); 
     } 
    }) 
}); 

Si vous êtes vraiment intéressé seulement à comparer la première lettre du premier « TD » dans une rangée, et non une lettre (« : contient ») puis modifiez la ligne qui dit:

if ($("td:first:contains('" + letter + "')", this).length != 0) { 

par:

if ($("td:first", this).text().substr(0,1) == letter) { 

Sinon, vous pouvez utiliser une expres régulière sion, par ex. remplacer:

var letter = $(this).text(); 

Par:

var re = new RegExp('^' + $(this).text()); 

et la ligne qui dit:

if ($("td:first:contains('" + letter + "')", this).length != 0) { 

par:

if ($("td:first", this).text().match(re)) { 

Answer 2

modifier: Je n'avais pas vérifié qu'il ne montre pas et le second td alors j'ai changé un peu mon code:

$('li').click(function() { 
var letter = $(this).text(); 
    $("table td").hide(); 
    $("table td:contains("+letter+"), table td:contains("+letter+") + td").show(); 
}); 

Démo: http://jsfiddle.net/rdBx9/1

ou

$('li').click(function() { 
var letter = $(this).text(); 
    $("table td").hide(); 
    $("table td:contains("+letter+")").show().next().show(); 
}); 

Démo: http://jsfiddle.net/rdBx9/2