使用jQuery隐藏/显示表行

我想做一张简单的桌子。加载文档时，应隐藏所有表行。如果单击按钮，则应显示与该按钮相关的表行

我从StackOverflow尝试了许多解决方案，但似乎没有任何效果。单击该按钮时，该表什么也不做。谢谢你帮助我，这意义重大

JSFiddle：

HTML

---

每个元素只能使用一次属性。与此相反：

<tr class="all" class="row1">

应该是：

$(document).ready(function () {
    ...
});

我会这样做：

<table class="my-table">
    <tr class="row1"><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr>
    <tr class="row2"><td>R2C1</td><td>R2C2</td><td>R2C3</td></tr>
    <tr class="row3"><td>R3C1</td><td>R3C2</td><td>R3C3</td></tr>
</table>
<button class="show-btn" data-show-row=".row1">Show Row 1</button>
<button class="show-btn" data-show-row=".row2">Show Row 2</button>
<button class="show-btn" data-show-row=".row3">Show Row 3</button>
<button class="show-btn" data-show-row=".row1,.row2,.row3">Show All Rows</button>
<script>
$(document).ready(function () {
    var rows = $(".my-table tr").hide();
    $(".show-btn").on("click", function () {
        var showRow = $(this).data("show-row");
        rows.hide().filter(showRow).show();
    });
});
</script>

R1C1R1C2R1C3
R2C1R2C2R2C3
R3C1R3C2R3C3
显示第1行
显示第2行
显示第3行
显示所有行
$（文档）.ready（函数（）{
var rows=$（“.my table tr”）.hide（）；
$（“.show btn”）。在（“单击”，函数（）{
var showRow=$（this）.data（“showRow”）；
rows.hide（）.filter（showRow.show（）；
});
});

这行出现语法错误，您正在将单词

function

放在以下位置：

$（文档）.ready（函数（）{
//
});

将

class=“all”class=“row1”

更改为

class=“all row1”

---

正如@Sverri已经指出的，使用

class=“all”class=“row1”

是无效的。应该是

class=“所有行1”

除此之外：

$（document）.ready（）

被键入：

$(document).ready(function()...
                         ^^^

我个人会把你所有庞大而不灵活的代码重构成这个灵活的代码：

$（文档）.ready（函数（）{
$（“.all”）.hide（）；
});
$（“[id^='showRow']”）。单击（函数（）{
$（“.all”）.hide（）；
$（“.row”+$（this.attr（“id”）.replace（“showRow”，即“）.show（）；
});
$（“#显示所有行”）。单击（函数（）{
$（“.all”）.show（）；
});

R1C1
R1C2
R1C3
R2C1
R2C2
R2C3
R3C1
R3C2
R3C3
显示第1行
显示第2行
显示第3行
显示所有有效的行
！你和Prashant的答案是一样的，但他的答案是：对不起，伙计。不过，非常感谢你帮助我：）呃，这当然很灵活，但太复杂了。。。甚至没有必要更改html…@nicael你能详细说明一下吗？如果我可以自己说的话，我认为它相当优雅。如果您需要添加更多的行/按钮，那么只需添加它们即可；不需要接触Javascript。我的意思是，通过这种方式使脚本变短，会使初始HTML复杂化，而不需要真正这样做。@nicael添加一个属性有多复杂？此外，如果您可以通过将某些内容移动到HTML来简化Javascript，那么这样做通常是一个好主意（尤其是在大型项目上）。复杂的Javascript比复杂的HTML糟糕得多。感谢您的回复和帮助@事实上，这个答案并不能解决你最大的问题——你的代码缺乏灵活性，而且很长——更专业地实现你的想法：）嗯，他只是想解决他的问题。他不想让代码变短，我的回答也不是要让代码变得灵活，只是解决他遇到的问题。
$(document).ready(function)
{
    ...
});

$(document).ready(function () {
    ...
});

<table class="my-table">
    <tr class="row1"><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr>
    <tr class="row2"><td>R2C1</td><td>R2C2</td><td>R2C3</td></tr>
    <tr class="row3"><td>R3C1</td><td>R3C2</td><td>R3C3</td></tr>
</table>
<button class="show-btn" data-show-row=".row1">Show Row 1</button>
<button class="show-btn" data-show-row=".row2">Show Row 2</button>
<button class="show-btn" data-show-row=".row3">Show Row 3</button>
<button class="show-btn" data-show-row=".row1,.row2,.row3">Show All Rows</button>
<script>
$(document).ready(function () {
    var rows = $(".my-table tr").hide();
    $(".show-btn").on("click", function () {
        var showRow = $(this).data("show-row");
        rows.hide().filter(showRow).show();
    });
});
</script>

$(document).ready(function()...
                         ^^^