Question

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Toggle</title>
<style>
        table, td, th {
        border: 2px solid black;
        border-collapse:collapse;
        height:50px; 
                  }
    td {width:200px;
    }
    body {
        padding: 50px;
    }
</style>
<script>
    var ind;
    $(document).ready(function () {

            $("#table tr").click(function () {
                if ($(this).index() > 0)
                $(this).hide();
            });
            $("#table th").click(function () {
                var ind = $(this).index();
                $("td:nth-child("+(ind+1)+")").toggle();
            });

    });
    function change() {

            $("tr").show();
    }
</script>
</head>
<body>
<button id="display" onclick="change">Show all</button>
<table id="table">
    <tr>
        <th>
            Company
        </th>
        <th>
            Name
        </th>
        <th>
            Color
        </th>
        <th>
            type
        </th>
    </tr>
    <tr>
        <td>Audi</td>
        <td>Q6</td>
        <td>Metalic grey</td>
        <td>SUV</td>
    </tr>
    <tr>
        <td>Jaguar</td>
        <td>A8</td>
        <td>Black</td>
        <td>Sedan</td>
    </tr>
    <tr>
        <td>Ambassador</td>
        <td>Classic</td>
        <td>White</td>
        <td>Sedan</td>
    </tr>
     <tr>
        <td>Mahindra</td>
        <td>Scorpio</td>
        <td>White</td>
        <td>SUV</td>
    </tr>
</table>

</body>
</html>

当我点击tr时它会隐藏。当我点击按钮时，我需要显示所有隐藏的tr。我还编写了隐藏列的代码。但是当我隐藏第3列的第3列内容占据第3列时让第四个人空了。任何人都可以正确指导我。谢谢你。

Answer 1

<button id="display" onclick="change()">Show all</button>

您忘记了()。

Answer 2

$（document）.ready（function（）{

        $("#table tr").click(function () {
            if ($(this).index() > 0)
            $(this).hide();
        });
        $("#table th").click(function () {
            var ind = $(this).index();
            $(this).toggle();
            $("td:nth-child("+(ind+1)+")").toggle();
        });

});

请添加代码$（tihs）.toggle（），如上所示。因为你只编写代码来隐藏tds而不是th。如果您想在按钮中再次显示该列，请将其添加到您的更改功能中。

。

$（ “TH”）显示（）; $（ “TD”）显示（）;

如何使用jQuery显示隐藏的所有元素？

2 个答案: