切换显示/隐藏元素，其中刷新的默认值为隐藏

Question

我的脚本成功地在表中显示和隐藏了一列，默认情况下，我希望它被隐藏，脚本显示它。

谢谢你的帮助。

<a onclick="myFunction()" style="float:right;">Hide/Show</a>

<table>
<tr>
    <th>TO Date</th>
    <th id="myDIV">LDG Date</th>
    <th>TO Time</th>
    <th>LDG Time</th>
    <th>Dep. air.</th>
    <th>Arr. air.</th>
    <th></th>
</tr>
{% for l in logbook %}
<tr>
    <td>{{ l.TO_Date }}</td>
    <td id="myDIV">{{ l.LDG_Date }}</td>
    <td>{{ l.TO_time }}</td>
    <td>{{ l.LDG_time }}</td>
    <td>{{ l.dep_airport }}</td>
    <td>{{ l.arr_airport }}</td>
    <td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Answer 1

只需在单元格中添加style="display: none;“：

<th class="myDIV" style="display: none;">

注意，我已经将id更改为类，因为在同一页上不应该有两个相等的id。

但我会这样做：

<style>
  .ldg-date-hidden .myDIV { display: none; }
</style>

<a onclick="myFunction()" style="float:right;">Hide/Show</a>

<table id="myTable" class="ldg-date-hidden">
<tr>
    <th>TO Date</th>
    <th class="myDIV">LDG Date</th>
    <th>TO Time</th>
    <th>LDG Time</th>
    <th>Dep. air.</th>
    <th>Arr. air.</th>
    <th></th>
</tr>
{% for l in logbook %}
<tr>
    <td>{{ l.TO_Date }}</td>
    <td class="myDIV">{{ l.LDG_Date }}</td>
    <td>{{ l.TO_time }}</td>
    <td>{{ l.LDG_time }}</td>
    <td>{{ l.dep_airport }}</td>
    <td>{{ l.arr_airport }}</td>
    <td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>

<script>
  function myFunction() {
    document.getElementById("myTable").classList.toggle("ldg-date-hidden");  
  }
</script>

Answer 2

您可以通过在标记上放置内联样式(display:none)来强制初始状态，这不是最好的方法，但应该有效。

我建议您将css文件上的样式与html文件分开，以避免层次结构问题。

const x = document.getElementById('myDIV');

function toggleVisibility() {
  if (x.classList.contains('hidden')) {
    x.classList.remove('hidden');
  } else {
    x.classList.add('hidden');
  }
}

CSS文件

.hidden: { 
    display: none; 
}

Answer 3

可以通过设置display:none来隐藏列，然后可以执行以下操作：

function myFunction() {
  var x = document.getElementsByClassName("myDIV");
  for(var i=0;i<x.length;i++)
  {
      if (x[i].style.display === "block") {
        x[i].style.display = "block";
      } else { 
        x[i].style.display = "none";
      }
 }
}