javascript - 单击时将在 HTML 表中显示隐藏列的按钮

Question

快速提问。我有一个按钮定义为:

<input type='button' id='button' value='Development View' >

包含以下信息的 div 标签:

echo "<div id = 'content' style='display:none'>";
    echo "<th>Development Status</th>";
echo "</div>";

点击按钮时运行的一些 JavaScript:

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
     var div = document.getElementById('content');
     if (div.style.display !== 'none') {
         div.style.display = 'none';
     }
    else {
        div.style.display = 'block';
    }
};

我的最终目标是在动态 HTML 表格中切换列的可见性，但我什至无法切换这个简单的标题标签。我没有收到错误消息，但按钮似乎什么也没做。我回显了 HTML，因为这是一个 PHP 脚本。

Answer 1

将您的 javascript 包装在 window.onload 事件中

window.onload = function () {

  var button = document.getElementById('button'); // Assumes element with id='button'

  button.onclick = function() {
    var div = document.getElementById('content');
    if (div.style.display !== 'none') {
      div.style.display = 'none';
    }
    else {
      div.style.display = 'block';
    }
  }
};