点击按钮将在HTML表格中显示隐藏列 [英] Button That When Clicked Will Display Hidden Column in HTML Table

问题描述

快速的问题。我有一个按钮定义为：

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

包含以下信息的div标签：

  echo< div id ='content'style ='display：none'>; 
回显开发状态< / th>; 
回显< / div>; 
  

只要点击按钮，就会运行一些JavaScript：

  var button = document.getElementById（'button'）; //假设元素的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脚本。 解决方案

将javascript包装到window.onload事件中

  window.onload = function（）{
 
 var button = document.getElementById（'button'）; //假设元素的id ='button'
 
 button.onclick = function（）{
 var div = document.getElementById（'content'）; 
 if（div.style.display！=='none'）{
 div.style.display ='none'; 
} 
 else {
 div.style.display ='block'; 
} 
} 
}; 
  

Quick question. I have a button defined as:

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

A div tag that encloses the following information:

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

Some JavaScript that runs whenever the button is clicked:

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';
    }
};

My ultimate goal is to toggle the visibility of a column in a dynamic HTML table but I can't even get this simple header tag toggling. I do not get an error message but the button does nothing it seems. I am echoing out the HTML because this is a PHP script.

解决方案

Wrap your javascript in a window.onload event

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';
    }
  }
};

这篇关于点击按钮将在HTML表格中显示隐藏列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！