Question

我有这样的代码：

我有一些这样的html代码：

<div id="mapLegendInside">
   <div>
      <table>
         // code
      </table>
      <div>
         <table class="esriLegendLayerLabel">
            // code
         </table>
         <table class="esriLegendLayer"> <--- I need to hide this table
            // code
         </table>
         <table class="esriLegendLayer">
            // code
         </table>
      </div>
   </div>
</div>

我需要将指向的表设置为style="display: none"，第一个表设置为class="esriLegendLaye。现在，我可以这样做：

document.getElementById("mapLegendInside").style["display"] = "none";

我将隐藏整个主div，但是，如何只选择我指向的表呢？请，我无法在其中的表或div中添加类或ID，此代码是由外部javascript库生成的，我只需要在主div的div中的第二个元素（div）中选择第二个表哈哈）。

以下是该代码的玩弄：

https://jsfiddle.net/pmiranda/coe0wa67/

Answer 1

您可以使用document.querySelector或querySelectorAll。

// you can use `document.querySelector`
document.querySelector('#mapLegendInside table.esriLegendLayer').style.display = 'none';
// or - use `querySelectorAll`
setTimeout(() =>
document.querySelectorAll('#mapLegendInside table.esriLegendLayer')[0].style.display = 'block', 1000);

<div id="mapLegendInside">
  <div>
    <table>
      <tr>
        <td>Code</td>
      </tr>
    </table>

    <div>
      <table class="esriLegendLayerLabel">
        <tr>
          <td>Code - table.esriLegendLayerLabel</td>
        </tr>
      </table>

      <table class="esriLegendLayer">
        <tr>
          <td>Code of the table that I need to hide</td>
        </tr>
      </table>

      <table class="esriLegendLayer">
        <tr>
          <td>Code - table.esriLegendLayer</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 2

请参见https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

适合您的示例是

var layers = document.querySelectorAll('.esriLegendLayer');

图层将是具有esriLegendLayer类的元素的数组，您可以根据需要将传递的选择器更改为或多或少特定。

要仅更改第一个，可以使用

document.querySelector('.esriLegendLayer').style.display = 'none'

Answer 3

您需要保留table结构。将tr和td添加到表中，以下代码将起作用

表示例

<table>
  <tr>
    <td>code</td>
  </tr>
</table>

document.querySelectorAll("#mapLegendInside table")[2].style.display = "none";

HTML和JS，在divs中隐藏tome表

3 个答案: