Question

我在网络表单上有两个表。在按钮上单击我想隐藏一个并显示另一个。我给了他们两个Id，我想设置表'style =“display：”

我在javaScript中使用函数和document.getelementbyid（id）.style.display ='none'尝试了这个，但它没有用。

任何想法？

解决方案：

OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;"

Answer 1

我假设你的表是.net控件？如果是这样，传递“id”是不够的，因为.net不会将相同的服务器ID分配给客户端ID。

您需要访问.net控制服务器端的ClientID属性才能获得真正的客户端ID：

MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);

上面的代码显示了如何将一些javascript（请不要将其称为java！）附加到名为 MyButton 的.net asp：按钮，然后在客户端点击该隐藏一个名为 ControlIWantToHide 的控件。

注意：以上内容可能需要调整以使其适用于所有浏览器，但.net内容是这里的重要因素，我怀疑ClientID是您一直需要的。

根据您对评论的回复，您切换的元素不是.net控件，但触发它们的按钮是:(基于ebrown发布的函数）：

<script type="text/javascript">
  function hide(id)
  {
     var element = document.getElementById(id);

     element.style.display='none';
  }

  function show(id)
  {
     var element = document.getElementById(id);

     element.style.display='block';
  }
</script>

您可以通过附加javascript事件处理程序服务器端来触发页面中元素的切换：

MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";

..将显示ID为 tbl1 的元素，并隐藏 tbl2 的元素。这将有效，提供您切换的元素不是.net控件 - 即，它们没有 runat =“server”属性。请记住，即使您将javascript代码添加到服务器上的asp：按钮，它也只会在客户端单击时执行。不要忘记返回'false'，如上所示，以停止asp：按钮的默认回发行为。

Answer 2

我认为这会让你走上正轨：

 <table id="tbl1" onclick="javascript:show('tbl2');hide('tbl1');" >
      <tr>
         <td>
             table 1 stuff
         </td>
      </tr>
  </table>

  <table id="tbl2" onclick="javascript:show('tbl1');hide('tbl2');">
      <tr>
         <td>
            table 2 stuff
         </td>
      </tr>
  </table>


<script type="text/javascript">
      function hide(id)
      {
         var element = document.getElementById(id);

         element.style.display='none';
      }

      function show(id)
      {
         var element = document.getElementById(id);

         element.style.display='block';
      }
   </script>

另外请确保您的ID是唯一的，我注意到您在示例代码中给了一个名为'tbl1'的tr元素。只有表格需要有Id的

编辑：这将隐藏Tr的工作（只需给tr一个唯一的id并使用相同的方法）。但是我相信如果一个表有点击事件，你将无法访问该行的onclick事件，所以你必须使用其中一个。

Answer 3

Asp.net将使用run =“server”更改任何服务器标记的ID。如果你试图使用javascript隐藏它们，你将不得不使用asp.net吐出的id（你可以使用视图源看到它）。或者，您可以将表格包装在div中，并使用常用方法显示/隐藏div。

如果您正在使用asp：Table并尝试在后面的代码中隐藏表，则可以使用.Visible属性来实现对回发的相同效果。

Answer 4

使用document.getelementbyid（id）.style.display =“none”隐藏和document.getelementbyid（id）.style.display =“block”显示

Answer 5

如果这些是纯粹基于html的表而不是尝试使用 -

document.getElementsByName（ '表1'）[0]的 style.visibility = '隐藏';

或

document.getElementsByName（ '表1'）[0]的 style.visibility = '可见的';

在.Net中的代码中获取表ID

5 个答案: