Question

我正在尝试制作一个简单的表格。加载文档时，应隐藏所有表格行。如果单击一个按钮，则应显示与该按钮相关的表行。

我已尝试过StackOverflow的许多解决方案，但似乎没有任何效果。单击该按钮时，该表根本不执行任何操作。谢谢你的帮助 - 这意味着很多。

HTML

<html>
    <body>
        <table>
            <tr class="all" class="row1">
                <td>R1C1</td>
                <td>R1C2</td>
                <td>R1C3</td>
            </tr>
            <tr class="all" class="row2">
                <td>R2C1</td>
                <td>R2C2</td>
                <td>R2C3</td>
            </tr>
            <tr class="all" class="row3">
                <td>R3C1</td>
                <td>R3C2</td>
                <td>R3C3</td>
            </tr>
        </table>

        <button id="showRow1">Show Row 1</button>
        <button id="showRow2">Show Row 2</button>
        <button id="showRow3">Show Row 3</button>
        <button id="showAllRows">Show All Rows</button>
    </body>
</html>

的JavaScript

$(document).ready(function)
{
    $(".all").hide();

    $("#showRow1").click(function()
    {
        $(".row1").show();
        $(".row2").hide();
        $(".row3").hide();
    });

    $("#showRow2").click(function()
    {
        $(".row2").show();
        $(".row1").hide();
        $(".row3").hide();
    });

    $("#showRow3").click(function()
    {
        $(".row3").show();
        $(".row1").hide();
        $(".row2").hide();
    });

    $("#showAllRows").click(function()
    {
        $(".row1").show();
        $(".row2").show();
        $(".row3").show();
    });
});

Answer 1

Working Fiddle

此行语法错误，您将function放在paranthesis中：

$(document).ready(function(){ // });
将class="all" class="row1"更改为class="all row1"

Answer 2

每个元素只能使用一次属性。而不是：

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

使用此：

<tr class="all row1">

当一个属性被多次使用时，在一个元素上，将使用最后一个。这意味着您的所有元素都没有all类。

此外，您的Javascript无效：

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

Answer 3

正如@Sverri已指出的那样，使用class="all" class="row1"无效。应该是class="all row1"。

除此之外：$(document).ready()被打字错误：

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

我个人会将所有巨大且不灵活的代码重构为这个灵活的代码：

    $(document).ready(function() {
        $(".all").hide();
    });
    $("[id^='showRow']").click(function () {
        $(".all").hide();
        $(".row" + $(this).attr("id").replace("showRow", "")).show();
    });
    $("#showAllRows").click(function() {
        $(".all").show();   
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="all row1">
        <td>R1C1</td>
        <td>R1C2</td>
        <td>R1C3</td>
    </tr>
    <tr class="all row2">
        <td>R2C1</td>
        <td>R2C2</td>
        <td>R2C3</td>
    </tr>
    <tr class="all row3">
        <td>R3C1</td>
        <td>R3C2</td>
        <td>R3C3</td>
    </tr>
</table>
<button id="showRow1">Show Row 1</button>
<button id="showRow2">Show Row 2</button>
<button id="showRow3">Show Row 3</button>
<button id="showAllRows">Show All Rows</button>

使用jQuery隐藏/显示表行

3 个答案: