Question

我需要帮助隐藏并在Javascript中显示表格。我的javascript非常短，这是因为我想使用setAttribute和getAttribut来点击链接＆＃34;隐藏/显示＆＃34;时隐藏和显示表格。

HTML

<a href="#" id="link">Hide/show</a></p>
        <table class="show" class="hide">
            <thead>
                <tr>
                    <th>First</th>
                    <th>Second</th>
                    <th>Third</th>
               </tr>
           </thead>
        </table>

CSS

 .hide{
    display:none;
 }

 .show{
    display:block;
 }

JAVASCRIPT

     var linkhideShow = document.querySelector("#hideshow");
     var show = document.querySelector(".show");
     var hide = document.querySelector(".hide");

      link.onclick = function() {
      if (){

      }
        else{

      }

    };

问候！

Answer 1

尝试这种方式：

<a href="#" id="link">Hide/show</a></p>
 <table id="table "class="show">
     <thead>
         <tr>
             <th>First</th>
             <th>Second</th>
             <th>Third</th>
         </tr>
      </thead>
  </table>
  <script>
    document.getElementById('link').onclick = function() {
        var t = document.getElementById('table');
        if(t.classList.contains("show")){
            t.className='hide';
        }else{
            t.className='show';
        }};
  </script>

Answer 2

让您入门（fiddle here）：

<a href="#" id="link" onclick="
 var elm = document.getElementsByTagName('table')[0];
 elm.style.display = elm.style.display ? '' : 'none';
">Hide/show</a>
<table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
       </tr>
   </thead>
</table>

修改（在您更新的问题之后）：

link.onclick = function(){
    var elm = document.getElementsByTagName('table')[0];
    elm.style.display = elm.style.display ? '' : 'none';
}

此处更新了fiddle。

简短说明：
三元语句（elm.style.display = elm.style.display？''：'none';）就像是if else：

variable = condition   ? /*true*/    :   /*false*/ ;
if(condition){variable = /*true*/;} else {variable = /*false*/;};

通常元素的style.display未设置，因此它是一个空字符串。空字符串在javascript中评估为false。因此，当style.display为'none'时，该字符串不为空。因此，当设置style.display（none）时，请将其设置为''，否则将其设置为'none'。

另一个重要注意事项：当元素的style.display未设置时，浏览器将以元素的默认显示模式呈现元素。内联元素（如span）将为inline，块元素（如div）将具有block，而表元素将具有table（ not block ）。<登记/> 因此，将元素style.display设置为''（而不是'block'），我们确保元素得到它的默认显示模式（也解决了一些奇怪的跨浏览器问题）。

当然，您也可以通过这种方式创建切换功能（将元素作为参数传递给切换）：

function toggle(elm){
    elm.style.display = elm.style.display ? '' : 'none';
}
// example use: toggle( document.getElementsByTagName('table')[0] );

注意：
你的表不应该有两个类属性，如：class="show" class="hide"。

另请注意：在HTML中，元素的class属性可以有多个以空格分隔的类：<elm class="class_a class_b"></elm>。为了可靠地添加/删除一个类需要另一个（有点重）函数（因为如果你设置完整的class-attribute，你完全覆盖 ）。

最好为表格提供一个唯一的ID并通过此ID引用它。

希望这有帮助！

Answer 3

使用jquery你可以简单地按照以下方式进行操作

$('#linkId').click(function () {
                $('#tabelId').toggle();
            });

Answer 4

为您的表提供这样的ID，并且只使用一个类属性：

<table class="table" id="table1">
            <thead>
                <tr>
                    <th>First</th>
                    <th>Second</th>
                    <th>Third</th>
               </tr>
           </thead>
        </table>

然后在css类表中设置您的默认值，或者您想将其调用到display:hidden;或display:none'

然后检查您的元素是否显示或隐藏，并按如下方式编辑属性：

 var table = document.getElementById("table1");
 document.getElementById('link').onclick = function() {
        if(table.styl.display == "none"){
            table.style.display = "block";
        }else{
            table.style.display = "none";
        }};

这是working Fiddle

Answer 5

Chagne HTML如下所示

<a href='#' id='link' onclick="ToogleClass();">Show/Hide</a>
<table id="table" class="show">
 <thead>
     <tr>
         <th>First</th>
         <th>Second</th>
         <th>Third</th>
     </tr>
  </thead>

在脚本标记中放入以下

function ToogleClass() {
var tableS = document.getElementById("table");
if ( tables.getAttribute("class") == "hide"){
tables.setAttribute("class","show");
} 
else {
tables.setAttribute("class","hide");
}

}

隐藏和显示表格

5 个答案: