Question

我想用一个按钮在一页上显示和隐藏多个表。不幸的是，我的脚本一次只能显示和隐藏一个表。

我的页面上有很多查询。表格中也有文本字段。为了更好地浏览，带有文本字段的表格仅在选中复选框后才显示。不应在开始时单击该复选框。

function Displayer(n)
{
  var check = document.getElementById('Section'+n);
  if (check.style.display == 'none')
    {
      check.style.display='inline';
    }
    else
    {
      check.style.display='none';
    }
}

<p><input type="checkbox" class="btnstylega" onClick="Displayer(99)" />Show Tables</p>

<table id="Section99" style="display:none;"> <td>
AAAAAAAAAAAAAA
</td></table>

<table id="Section99" style="display:none;"> <td>
BBBBBBBBBBBBBBB
</td></table><br>

我想在不通过单击复选框来调整表的情况下显示和隐藏许多表。

Answer 1

ID 必须在文档中必须是唯一的。将多个元素标记为组的一部分的工具是一个类。

将id属性替换为class属性。

然后将getElementById替换为getElementsByClassName（或querySelectorAll）。

这些方法返回节点列表，而不是单个元素，因此像数组一样遍历结果并依次访问每个属性的style属性。

Answer 2

属性id在文档中必须是唯一的，您可以改用class。您可以使用querySelectorAll()定位所有具有class的元素，然后循环遍历以设置样式。您可以使用class来切换classList.toggle()，如下所示：

function Displayer()
{
  var check = document.querySelectorAll('.Section99');
  check.forEach(function(table){
    table.classList.toggle('show');
  });
}

.Section99{
  display: none;
}
.show{
  display: block;
}

<p><input type="checkbox" class="btnstylega" onClick="Displayer()" />Show Tables</p>

<table class="Section99" class="hide"> <td>
AAAAAAAAAAAAAA
</td></table>

<table class="Section99" class="hide"> <td>
BBBBBBBBBBBBBBB
</td></table><br>

Answer 3

改进：它将添加事件处理程序并在需要时触发加载更改

请注意复选框的数据属性

var chg = new Event('change');
document.querySelectorAll(".btnstylega").forEach(function(but) {
  but.addEventListener("change", function() {
    var checked = this.checked,
      section = this.getAttribute("data-tables");
    document.querySelectorAll('.Section' + section).forEach(function(sect) {
      sect.classList.toggle("hide",!checked);
    });
  })
  but.dispatchEvent(chg);
});

.hide {
  display: none;
}

<p><input type="checkbox" class="btnstylega" data-tables="88" checked />Show Tables 88 </p>
<p><input type="checkbox" class="btnstylega" data-tables="99" />Show Tables 99</p>

<table class="Section88">
<tr>
  <td>
    AAAAAAAAAAAAAA
  </td>
  </tr>
</table>

<table class="Section88">
<tr>
  <td>
    BBBBBBBBBBBBBBB
  </td>
  </tr>
</table><hr>
<table class="Section99">
<tr>
  <td>
    CCCCCCCCCCCCCCCC
  </td>
  </tr>
</table>

<table class="Section99">
<tr>
  <td>
    DDDDDDDDDDDDDDDDDDDD
  </td>
  </tr>
</table>

显示/隐藏多个<table>（带有一个复选框）

3 个答案: