如何隐藏<td>？

Question

所以我有这些代码（只有必要的部分）这是按钮所在的位置：

<td id="Assault">
<button onclick="hideassault()">Assault</button>
</td>

<td id="AssaultWP">

所有这些图像（实际上是按钮）都在一个 table 单元格中，并且它们都具有相同的 ID

#AssaultWP{
display:block;
}

这个也很简单 css 这很重要

和我认为可行的脚本：

function hideassault() {
var hideA = document.getElementById("AssaultWP");
if (hideA.style.display === "none") {
    hideA.style.display = "block";
} else {
    hideA.style.display = "none";
}
}

我想既然所有的 td 都有相同的 ID，它会隐藏所有的，但它实际上只隐藏了第一个单元格，随之而来的是我的问题：如果它们具有相同的 ID，它不应该隐藏所有单元格吗？我做错了什么？有人可以帮我做吗？提前感谢您的帮助！

Answer 1

ID 应该是唯一的。在这种你必须处理多个东西的情况下使用 classes。我假设您将 class 命名为 'AssaultWP'。 js 函数看起来像

function hideassault() {
  var hideA = document.getElementsByClassName("AssaultWP");
  var n = hideA.length;
  if (document.getElementsByClassName("AssaultWP")[0].style.display === "none") {
    for(i=0;i<n;i++){
      hideA[i].style.display = "block"; 
    }
  } else {
    for(i=0;i<n;i++){
      hideA[i].style.display = "none"; 
    }
  }
}

这是一个fiddle。

Answer 2

让我来帮忙，所以首先请记住，您正在使用 td 但从未定义其父元素 table，因此这将是第一个修复方法。

示例：

<table>
 <tr> 
   <th>Header</th> <!-- table header -->
 </tr>

 <tr>
   <td>data/information</td> <!-- table data/information -->
 </tr>
</table>

第二个问题正如我昨天评论的那样，id 是一个唯一标识符。如果所有名称都相同，则使用 classes。

这就引出了第三个问题，document.getElementsByClassName returns 一个数组类型的对象= HTMLCollection.

因此 querySelectorAll 在这种情况下将帮助您 select 每个元素的 class 名称。

示例：

function hideAssault() {
[].forEach.call(document.querySelectorAll('.assault_r'), function (sh) {

  if (sh.style.display === "none") {
    sh.style.display = "table-cell"; //block , not preferred , but up to you
  } else {
    sh.style.display = "none";
  }
  
});
}

table, th, td {
    border: 1px solid black;
}

td {
    display: table-cell; /* block , not preferred , but up to you*/
}

<table>
  <tbody>
  <tr>
    <td>
      <button onclick="hideAssault()">Assault</button>
    </td>
  </tr>

  <tr>
    <td class="assault_r">Assault</td>
    <td class="assault_r">Assault2</td>
    <td class="assault_r">Assault3</td>
    <td class="assault_r">Assault4</td>
    <td class="assault_r">Assault5</td>
    <td class="assault_r">Assault6</td>
    <td class="assault_r">Assault7</td>
  </tr>
  </tbody>
</table>

如何隐藏<td>？

How to hide <td>?

html

css

html-table

hide