javascript - 根据表格单元格的内容隐藏表格行

Question

我想制作一些 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”，这就是在浏览器中呈现的内容:

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

我真的是 jQuery 的新手，所以任何关于如何解决这样的问题的提示都将不胜感激:)

Answer 1

Sotris 的回答几乎是正确的。我相信你想要的是:

$('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", this).text().substr(0,1) == letter) {

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

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

通过:

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

还有那一行:

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

通过:

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