Как скрыть тег html таблицы по itemprop

170

20 апреля 2021, 17:10

Как можно скрыть первую строку в таблице, если таблица для товара создается автоматически в админке. Пробовал через js (сам новичок в этом), нашел способ по id и классу, но id тут прописать не могу, а по классу скрывается вся таблица с помощью display:none;

<table> 
  <tbody> 
    <tr> 
      <td class="name">Рекомендуем</td> 
      <td class="value" itemprop="rekomenduem" style="opacity: 1;">Показать все</td> 
    </tr> 
    <tr> 
      <td class="name">Бренд</td> 
      <td class="value" itemprop="proizvoditel1" style="opacity: 1;">Гефест</td> 
    </tr> 
    <tr> 
      <td class="name">Грузоподъемность, кг</td> 
      <td class="value" itemprop="gruzopodemnost" style="opacity: 1;">1500</td> 
    </tr> 
  </tbody> 
</table>

Answer 1

const reference = document.querySelector('td[itemprop="rekomenduem"]'); 
reference.parentNode.style.display = 'none';

<table> 
  <tbody> 
    <tr> 
      <td class="name"> Рекомендуем</td> 
      <td class="value" itemprop="rekomenduem" style="opacity: 1;">Показать все</td> 
    </tr> 
    <tr> 
      <td class="name"> Бренд</td> 
      <td class="value" itemprop="proizvoditel1" style="opacity: 1;">Гефест</td> 
    </tr> 
    <tr> 
      <td class="name">Грузоподъемность, кг</td> 
      <td class="value" itemprop="gruzopodemnost" style="opacity: 1;">1500</td> 
    </tr> 
  </tbody> 
</table>

Либо по тексту

const references = document.querySelectorAll('td.name'); 
 
references.forEach((reference) => { 
  if(reference.textContent === ' Рекомендуем'){ 
    reference.parentNode.style.display = 'none'; 
  } 
});

<table> 
  <tbody> 
    <tr> 
      <td class="name"> Рекомендуем</td> 
      <td class="value" itemprop="rekomenduem" style="opacity: 1;">Показать все</td> 
    </tr> 
    <tr> 
      <td class="name"> Бренд</td> 
      <td class="value" itemprop="proizvoditel1" style="opacity: 1;">Гефест</td> 
    </tr> 
    <tr> 
      <td class="name">Грузоподъемность, кг</td> 
      <td class="value" itemprop="gruzopodemnost" style="opacity: 1;">1500</td> 
    </tr> 
  </tbody> 
</table>

Answer 2

Наверное Вам подойдет селектор первого элемента :first-child :

tr:first-child { 
 display:none 
}

<table> 
  <tbody> 
    <tr> 
      <td class="name"> Рекомендуем</td> 
      <td class="value" itemprop="rekomenduem" style="opacity: 1;">Показать все</td> 
    </tr> 
    <tr> 
      <td class="name"> Бренд</td> 
      <td class="value" itemprop="proizvoditel1" style="opacity: 1;">Гефест</td> 
    </tr> 
    <tr> 
      <td class="name">Грузоподъемность, кг</td> 
      <td class="value" itemprop="gruzopodemnost" style="opacity: 1;">1500</td> 
    </tr> 
  </tbody> 
</table>