时间戳

首页 > 解决方案 > Javascript 按钮按条件显示

javascript - Javascript 按钮按条件显示

问题描述

我试图使按钮仅在显示表格时才可见，但它似乎不起作用，按钮没有隐藏。

PS：抱歉没有澄清，我的 javascript 运行 onload

HTML：

var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc == "") {
  DLButtons.style.visibility = 'hidden';
} else if (DLFunc != "") {
  DLButtons.style.visibility = 'visible';
}
<div id="view-container">
  <main ng-view></main>
</div>
<div id="tableToCsv">
  <button class="btnCSV">CSV file</button>
</div>

完整的 HTML：

    <body ng-controller="DataController">
    <header ng-include="'FixedPages/header.html'"></header>
    <div ng-include="'FixedPages/mapAHH.html'"></div>
    <div id="view-container">
      <main ng-view></main>
    </div>
    <div id="tableToCsv">
    <button class="btnCSV">CSV file</button>
    </div>
    <footer ng-include="'FixedPages/footer.html'"></footer>
     <script src="js\DownloadCSV.js"></script>
    </body>

标签： javascriptangularjs

解决方案

通过计算表格标签的数量来检查是否有表格显示。不是检查空字符串，而是检查数组的长度：

var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc.length == 0) {
  DLButtons.style.visibility = 'hidden';
} else  {
  DLButtons.style.visibility = 'visible';
}

还要检查代码何时运行（可能添加警报），因为在您的 JS 运行时可能尚未创建表。

更新：

您的 JS 在页面加载时不会拾取表格，而 AngularJS 可能稍后会创建元素。

您可以在 DLButtons HTML 中添加如下内容：

<button class="btnCSV" *ngShow="hasTable()">CSV file</button>

然后在你的 Angular Component.ts/js 中：

hasTable() {
  return document.getElementsByTagName("table").length > 0;
}

推荐阅读