Question

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

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

这是我的标记：

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

所以，如果我按下＆＃34; A＆＃34;这是在浏览器中呈现的内容：

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

Answer 2

编辑：我没有检查过它没有显示，第二个td所以我改变了一点我的代码：

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

演示：http://jsfiddle.net/rdBx9/1

或

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

演示：http://jsfiddle.net/rdBx9/2

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

2 个答案: