Question

我有两张桌子 - 注册的玩家和未注册的玩家。每个表都有一组与它们相关联的不同数据。我想拥有它，以便只有一个表显示在页面上并有一个箭头按钮来隐藏当前显示的表并显示另一个表。

如何实现这一目标？

Answer 1

就像@Pete所说，普通的html不会这样做，所以你需要一些JavaScript，而jQuery是一个非常流行且功能强大的库（用JavaScript编写）来完成这些事情只需几行码。

以下是example如何实现这样的事情：

$(document).ready(function () {
    $("#changeTable").click(function () {
        $("#registred").toggle();
        $("#not-registred").toggle();
    });
});

注意：您必须包含一个链接到jQuery的<script>标记，其中一个包含表格的div应该从样式display: none开始隐藏（如示例中所示）

所以最终的结果将是：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="myStyles.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <input id="changeTable" type=button value="Show The Other Table"/>
    <div id="registred" />
    <div id="not-registred" style="display: none;" />
    <!-- rest of your HTML code -->
    <script type="text/javascript">
         $(document).ready(function () {
             $("#changeTable").click(function () {
                 $("#registred").toggle();
                 $("#not-registred").toggle();
              });
         });
    <script> 
</body>
</html>

Answer 2

设置display：none;对于CSS中的两个（或者只有一个，如果有默认值）表。创建一个Javascript函数，它将检测哪一个显示为none，并将其切换为内联。类似的东西：

function toggleVisibility(){
  if(Document.getElementById("Table1").style.display == "none"){
    Document.getElementById("Table1").style.display = "inline";
    Document.getElementById("Table2").style.display = "none";
  }else{
    Document.getElementById("Table2").style.display = "inline";
    Document.getElementById("Table1").style.display = "none";
  }
}

然后只需从你的切换按钮调用此功能就可以了。

如何在HTML中循环表

2 个答案: