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

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

javascript jquery html

Javascript 如何使用jQuery显示隐藏的所有元素？,javascript,jquery,html,Javascript,Jquery,Html,当我点击tr时，它将隐藏。当我点击按钮时，我需要显示所有隐藏的tr。我还编写了隐藏列的代码。但是当我隐藏第3列内容时，第4列占据第3列，使第4列变为空。有人能正确指示我吗。提前感谢 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.

当我点击tr时，它将隐藏。当我点击按钮时，我需要显示所有隐藏的tr。我还编写了隐藏列的代码。但是当我隐藏第3列内容时，第4列占据第3列，使第4列变为空。有人能正确指示我吗。提前感谢

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

您忘记了。

$document.readyfunction{

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

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

$th.show；

$td.show；

使用show all@Milind，但它不起作用。在这里，Change是一个函数，您应该用作Change not Change为什么对某些事件使用jQuery，而对其他事件使用内联脚本。选择其中一个或另一个感谢它起作用。我还编写了隐藏列的代码。但是，当我隐藏第4列的第3列内容时，第4列占据了第3列列使第四列为空。有人能纠正我吗？当您使用“隐藏”时，显示设置为“无”，在您的情况下，第四列将取代第三列。为防止出现这种情况，请使用.cssvisibility，hidden而不是.hide。

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

});