使用jQuery隐藏/显示表行

时间:2015-03-29 19:40:12

标签: jquery html

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

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

JSFiddle:https://jsfiddle.net/td5npLuu/

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();
    });
});

3 个答案:

答案 0 :(得分:1)

Working Fiddle

  1. 此行语法错误,您将function放在paranthesis中:

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

  2. class="all" class="row1"更改为class="all row1"

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

正如@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>