テーブルヘッダーをクリックしてテーブルの行を表示および非表示にする方法は？

rowを表示するにはgetElementById（）メソッドを使用します。 "Header"をクリックして次の行を表示します。 getElementById（）を正しく使用するには？コードhereを実行することができます。テーブルヘッダーをクリックしてテーブルの行を表示および非表示にする方法は？

function hide() { 
 
    var table = document.getElementById("mytab1"); 
 
    for (var i = 0, cell; cell = table.cells\[i\]; i++) { 
 
    cell.style.display = "none"; 
 
    } 
 
}

<html> 
 

 
<head> 
 
    <style> 
 
    ... 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <th onclick="hide()"> Header </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 1 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> Quit </td> 
 
    </tr> 
 

 
    </table> 
 

 
</body> 
 

 
</html>

出典

2017-10-25 Jim

現在の結果は何ですか？フィドルを作成してください –

リンクしたコードが機能しません。 – Amit

さて、まず、あなたは間違ってやっていることは、まずあり、私はのdocument.getElementById（"mytab1"）を見つけることができません。 mytab1 id、mytab1が表示するためには、対応するIDを作成する必要があります。今では私に教えてくれない場合は、それを試してみて、それが動作するかどうかを確認

<table id="mytab1"> 
    <tr> 
    <th onclick="hide()" style="cursor:pointer;"> Header </th> 
    </tr> 


    <tr ><td> 1 </td></tr> 

    <tr ><td><a style="cursor:pointer;"> Quit </a></td></tr> 

    </table> 


    <script> 
function hide() { 
       var table = document.getElementById("mytab1"); 
       alltr = table.querySelectorAll("tr"); 

       for (var i = 1; i < alltr.length-1; i++) { 
        alltr[i].style.display = (alltr[i].style.display == "none") ? "" : "none"; 
       } 
      } 
    </script>

、これを試してみてください、あなたの例を再現し、それを一緒に解決することができます。

出典

2017-10-25 10:22:19 Shasha

こんにちは、ここではうまくいきません。https://www.w3schools.com/code/tryit.asp?filename=FKUOCSESGB0V – Jim

@Dimitris私はあなたのコードを見ています。 – Shasha

@Dimitris完了したら、それを使って動作しています。 – Shasha

jQueryを使用すると、この出力を得ることができます。

$(function() { 
 
    var $rows = $('#mytab1 tbody'); 
 
    $("#mytab1 th").on("click", function() { 
 
    // alert("Clicked"); 
 
    $rows.hide(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytab1"> 
 
    <thead> 
 
    <th> Header </th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 1 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> Quit </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-10-25 10:23:48 Bhargav

これは正常に動作していますが、ヘッダーも隠しています。 – Jim

私のコードを更新しました。出力は@Dimitrisです – Bhargav

私は、既存の回答と比較してわずかに異なる方法を使用してきました。また、これはjQueryの代わりにプレーンなJavascriptを使用します。

まず、代わりにインラインスタイルを通じて要素を隠し、あなたはCSSを使用することができます：あなたは複数のテーブルを持っている、とのテーブルのIDをハードコーディングしたくない場合は、次に

table.bodyHidden tr:nth-child(odd), 
table.bodyHidden tr:nth-child(even) { 
    display: none; 
} 

table.bodyHidden tr:first-child { 
    display: block; 
}

をスクリプトの場合は、event.targetをクリックハンドラの<table>要素に移動し、bodyHiddenクラスを切り替えます。

function hide(event) { 
 
    var tableNode = undefined; 
 
    var currentNode = event.target; 
 
    
 
    // Search for the table node among the parent elements of the element that triggered the click event. 
 
    while(tableNode == undefined) { 
 
    if(currentNode.nodeName == 'TABLE') { 
 
     tableNode = currentNode;  
 
    } else { 
 
     currentNode = currentNode.parentNode; 
 
    } 
 
    } 
 
    
 
    // Toggle the bodyHidden class. 
 
    if(tableNode.classList.contains("bodyHidden")) { 
 
    tableNode.classList.remove("bodyHidden"); 
 
    } else { 
 
    tableNode.classList.add("bodyHidden"); 
 
    } 
 
}

table.bodyHidden tr:nth-child(odd), 
 
table.bodyHidden tr:nth-child(even) { 
 
    display: none; 
 
} 
 

 
table.bodyHidden tr:first-child { 
 
    display: block; 
 
}

<body> 
 
    <table> 
 
    <tr> 
 
     <th onclick="hide(event)"> Header </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 1 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> Quit </td> 
 
    </tr> 
 

 
    </table> 
 

 
</body>

出典

2017-10-25 10:39:21 Nisarg

テーブルヘッダーをクリックしてテーブルの行を表示および非表示にする方法は？

答えて

関連する問題