如何添加按钮来隐藏和显示表格，我可以隐藏表格但它不显示
[英]How to add a button to hide and show a table, I can hide the table but it does not show
问题描述
我想要一个按钮来切换（显示/隐藏）表格。 我的代码将隐藏表格，但不会再次显示。 一旦我单击按钮，表格就会消失。 但是当我再次单击它时，它看起来像是进行了奇怪的刷新或重定向。 我假设文件丢失并且表格不会再次显示。 这是我的代码：
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>
1 个解决方案
解决方案1
0 2022-08-10 20:44:20
正如@Barmar 提到的，正确的值如下：
style.display none接受或block
style.visibility采用hidden或visible
正如@Barmar 提到的，我更正了if..else块的结构，以根据需要隐藏和显示表格。
我添加了一个removeFunction()来显示删除元素和隐藏元素之间的区别。 如果您设置style.display:none则元素将从页面中删除并且内容移动以填补空白。 但是，如果您设置style.visibility:hidden ，该元素将保持在相同的 position 中，没有任何移动，但该元素不再可见。
因为该按钮是一个submit按钮，所以正如您所描述的那样，页面正在以一种奇怪的方式刷新。 因此，我还将按钮的类型从submit更改为button 。
这是一个最小的代码演示：
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>
在标题（th）上添加按钮以在引导表中隐藏和显示过滤器控件
[英]Add button on header (th) to hide and show filter control in bootstrap table
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.