隱藏和顯示表

Question

我需要隱藏方面的幫助並使用Javascript顯示表格。 我的JavaScript很短，這是因為我想使用setAttribute和getAttribut，因此可以通過單擊“隱藏/顯示”鏈接來隱藏和顯示表格。

的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

為了幫助您入門（ 在此處撥弄 ）：

<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';
}

在這里更新了小提琴 。

簡短說明：
三元語句（elm.style.display = elm.style.display？''：'none';）就像if 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 （ 非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> 。 為了可靠地添加/刪除一個類，將需要另一個（有點沉重）的功能（因為如果要設置完整的類屬性，則將其完全覆蓋 ）。

最好給表一個唯一的ID並通過此ID引用。

希望這可以幫助！

Answer 3

使用jQuery，您可以簡單地做到如下

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

Answer 4

給您的表一個這樣的ID，並且僅使用一個class屬性：

<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";
        }};

這是一個工作的小提琴

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

}