<tr> 如果中的所有元素<tr>都有显示无类，我可以隐藏吗？加载整个页面后

Question

<form id="formid">
  <table>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
          <input type="text" style="display:none">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" style="display:none">
          <input type="text" style="display:none">
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
          <input type="text" style="display:none">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" style="display:none">
          <input type="text" style="display:none">
        </td>
      </tr>
    </tbody>
  </table>
</form>

我有多个表格中的表格，我想隐藏所有行，所有元素都没有显示样式。如果我们只有一个没有显示样式的元素（但显示了其他样式），则无需隐藏行，在上面的示例中隐藏了每个表的第二行

Answer 1

让我们为此定义 function

function hideRowIfNeeded() {
    var trs = document.querySelectorAll("#formid tr");
    for (var tr of trs) {
        var hide = true;
        var inputs = tr.querySelectorAll("input");
        for (var input of inputs) {
            if (input.style.display !== "none") hide = false;
        }
        if (hide) tr.style.display = "none";
    }
}

现在您可以在身体标签中指定onload="hideRowIfNeeded()"。

Answer 2

而不是使用 display:none;，为什么不使用 disabled prop？

无论如何，您可以通过获取每个tr并检查其input S是否被禁用来执行此类操作。如果您真的想使用display:none，只需替换

input.disabled with input.style.display === "none"

如果在tr中禁用了所有输入，则表行将被隐藏。

• 使用addEventListener确保在运行JavaScript >或之前将页面加载到。

• style="display=none"不正确。使用style="display:none;"

window.addEventListener("load", ()=>{
  Array.from(document.getElementsByTagName("tr")).forEach(tr => {
  
      const shouldDisable = 
        Array.from(tr.querySelectorAll("input"))
        .every(input => input.disabled);
      
      if(shouldDisable){
          tr.style.display = "none"
      }
  });
});

<form id="formid">
  <table>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
          <input type="text" style="display:none;">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox "  style="display:none;">
          <input type="text"  style="display:none;">
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr>
        <td>
          <input type="checkbox"  style="display:none;">
          <input type="text"  style="display:none;">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox "  style="display:none;">
          <input type="text "  style="display:none;">
        </td>
      </tr>
    </tbody>