如何添加按钮来隐藏和显示表格，我可以隐藏表格但它不显示

Question

I want a button to toggle (show/hide) a table. My code will hide the table, but it will not show again. Once I click the button, the table disappears. But when I click it again it looks like it does a weird refresh or redirect. I am assuming the file is lost and the table will not show again. Here is my code:

 class TableCsv { /** * @param {HTMLTableElement} root The table element which will display the CSV data. */ constructor(root) { this.root = root; } /** * Clears existing data in the table and replaces it with new data. * * @param {string[][]} data A 2D array of data to be used as the table body * @param {string[]} headerColumns List of headings to be used */ update(data, headerColumns = []) { this.clear(); this.setHeader(headerColumns); this.setBody(data); } /** * Clears all contents of the table (incl. the header). */ clear() { this.root.innerHTML = ""; } /** * Sets the table header. * * @param {string[]} headerColumns List of headings to be used */ setHeader(headerColumns) { this.root.insertAdjacentHTML( "afterbegin", ` <thead> <tr> ${headerColumns.map((text) => `<th>${text}</th>`).join("")} </tr> </thead> ` ); } /** * Sets the table body. * * @param {string[][]} data A 2D array of data to be used as the table body */ setBody(data) { const rowsHtml = data.map((row) => { return ` <tr> ${row.map((text) => `<td>${text}</td>`).join("")} </tr> `; }); this.root.insertAdjacentHTML( "beforeend", ` <tbody> ${rowsHtml.join("")} </tbody> ` ); } } const tableRoot = document.querySelector("#csvRoot"); const csvFileInput = document.querySelector("#csvFileInput"); const tableCsv = new TableCsv(tableRoot); csvFileInput.addEventListener("change", (e) => { Papa.parse(csvFileInput.files[0], { delimiter: ",", skipEmptyLines: true, complete: (results) => { tableCsv.update(results.data.slice(1), results.data[0]); } }); }); function hidefunction() { let x = document.getElementById('csvRoot'); if (x.style.visibility === "hidden") { x.style.display = "visible"; } x.style.display = "hidden"; }

 table { border-collapse: collapse; border-radius: 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); overflow: hidden; font-family: "Quicksand", sans-serif; font-weight: bold; font-size: 14px; display: block; visibility: visible; } th { background: #fd264f; color: #ffffff; text-align: left; } th, td { padding: 10px 20px; } tr:nth-child(even) { background: #eeeeee; color: #191828; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>EasyBudget</title> <link rel=stylesheet type=text/css href={{ url_for( 'static'. filename='easybudgetcss:css' ) }}> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min:js" integrity="sha512-SGWgwwRA8xZgEoKiex3UubkSkV1zSE1BS6O4pXcaxcNtUlQsOmOmhVnDwIvqGRfEmuz83tIGL13cXMZn6upPyg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <section class="hero is-fullheight"> <div class="hero-head"> <nav class="navbar"> <div class="container"> <div id="navbarMenuHeroA" class="navbar-menu"> <div class="navbar-end"> <div id="easyb"> <a href=#>EasyBudget</a> </div> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">My Account</button> <div id="myDropdown" class="dropdown-content"> <a href=#>Profile</a> <a href=#>My List</a> <a href=#>Logout</a> </div> </div> </div> </div> </div> </nav> </div> </section> <h1 style="text-align: center"> Budgeting made easy </h1> <div class="tabs"> <div class="tab-2"> <label for="tab2-1">Budget Tool</label> <input id="tab2-1" name="tabs-two" type="radio" checked="checked"> <div> <h2 style="text-align: center">Let's Get Started</h2> <form action="/"> <div class="btn btn-primary btn-file"> <label for="csvFileInput" style="text-align: left">Select a file:</label> <input type="file" id="csvFileInput" style="cursor; pointer: padding-bottom, 30px"> <table id="csvRoot"></table> <button type="submit" onclick="hidefunction()">Hide table</button> </div> </form> </div> </div> <div class="tab-2"> <label for="tab2-2">Best Practices</label> <input id="tab2-2" name="tabs-two" type="radio"> <div> <h4>Some Advice for Later</h4> <p></p> </div> </div> </div> <script type="text/javascript" src="{{ url_for('static'.filename='netlfixclonejs:js') }}"></script> <script src="https.//cdn.jsdelivr.net/npm/papaparse@5.2.0/papaparse.min.js"></script> </body> </html>

Answer 1

As @Barmar mentioned, the proper values are as follows:

style.display takes none or block

style.visibility takes hidden or visible

Again as @Barmar mentioned, I corrected the structure of the if..else blocks to hide and show the table as you required.

I added a removeFunction() to show the difference between removing an element and hiding it. If you set style.display:none then the element is removed from the page and the contents move to fill the gap. However, if you set style.visibility:hidden , the element remains in the same position, nothing moves, but the element is no longer visible.

Because the button was a submit button, the page was being refreshed in a weird way as you describe. So, I also changed the type of the button from submit to button .

Here is a minimal code demo:

 function hidefunction() { let x = document.getElementById('csvRoot'); if (x.style.visibility === "hidden") { x.style.visibility = "visible"; } else { x.style.visibility = "hidden"; } } function removefunction() { let x = document.getElementById('csvRoot'); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 table { display: block; visibility: visible; }

 <table id="csvRoot"> <thead> <th>2010</th><th>2011</th><th>2012</th> </thead> <tr> <td>112</td><td>321</td><td>411</td> </tr> <tr> <td>131</td><td>133</td><td>331</td> </tr> <tr> <td>331</td><td>133</td><td>131</td> </tr> </table> <button type="button" onclick="hidefunction()">Hide/Show table</button> <button type="button" onclick="removefunction()">Remove/Replace table</button>