Javascript 基于表格单元格的内容隐藏表格行

我想创建一些jQuery，根据每行中第一个表单元格的内容显示一些表行并隐藏其他行

单击列表项时，我希望jQuery检查该项的第一个字母是否与标记中任何表单元格中的第一个字母匹配，如果匹配，则应显示父表行，并隐藏其他行

这是我的标记：

<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>

A
B
G

阿尔法1
一些内容
阿尔法2
一些内容
阿尔法3
一些内容
β1
一些内容
β2
一些内容
β3
一些内容
伽玛1
一些内容
伽玛2
一些内容
伽玛3
一些内容

因此，如果我按“A”，浏览器中呈现的就是这个：

<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>

A
B
G

阿尔法1
一些内容
阿尔法2
一些内容
阿尔法3
一些内容

---

我对jQuery非常陌生，因此任何关于如何处理此类问题的提示都将不胜感激：）

编辑：我没有检查它是否显示，第二个

td

因此我对代码做了一些更改：

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

演示：

或

---

演示：

编辑：我没有检查它是否不显示，第二个

td

因此我对代码做了一些更改：

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

演示：

或

---

演示：

索特里斯的回答几乎是正确的。我相信你想要的是：

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

如果您真正感兴趣的只是比较一行中第一个“TD”的第一个字母，而不是任何一个字母（“：contains”），那么请更改以下行：

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

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

作者：

或者，您可以使用正则表达式，例如替换：

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

作者：

这句话说：

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

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

作者：

---

索特里斯的回答几乎是正确的。我相信你想要的是：

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

如果您真正感兴趣的只是比较一行中第一个“TD”的第一个字母，而不是任何一个字母（“：contains”），那么请更改以下行：

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

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

作者：

或者，您可以使用正则表达式，例如替换：

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

作者：

这句话说：

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

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

作者：

---

大卫，你说得对。我发现了这一点，并相应地修改了答案。@Neil，我看到了；因此我删除了评论=）@David，我看到你删除了你的评论，所以我尝试删除我的评论，但没有成功。@Neil，没问题。假设不需要代表，您只需单击姓名附近的“x”，鼠标悬停在您的评论上方时会出现该“x”。=）发现了一个小问题-解决方案使用了我作为示例使用的标记，但是在我编写时，我只想检查第一个字母。例如，如果某个td中包含“BETA”，则由于大写字母“a”，该td将为假阳性。希望这有意义：斯达维德，你是对的。我发现了这一点，并相应地修改了答案。@Neil，我看到了；因此我删除了评论=）@David，我看到你删除了你的评论，所以我尝试删除我的评论，但没有成功。@Neil，没问题。假设不需要代表，您只需单击姓名附近的“x”，鼠标悬停在您的评论上方时会出现该“x”。=）发现了一个小问题-解决方案使用了我作为示例使用的标记，但是在我编写时，我只想检查第一个字母。例如，如果某个td中包含“BETA”，则由于大写字母“a”，该td将为假阳性。希望这有意义：S