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

为什么不使用display:none;道具而不是使用disabled？

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

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

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

使用addEventListener来确保页面已加载，然后再运行JavaScript 或，将脚本放在HTML页面的末尾。
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>

Answer 2

为此定义一个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";
    }
}

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

如果所有元素都没有显示，是否可以隐藏？加载整个页面后

2 个答案: