Блог

Главная - Вопросы по программированию - Сделайте так, чтобы таблица исчезла с помощью JavaScript

Сделайте так, чтобы таблица исчезла с помощью JavaScript

#javascript #html #html-table #media-queries

#javascript #HTML #html-таблица #медиа-запросы

Вопрос:

Это коды Js и Html:

 function div(window.matchMedia("(max-width:800px)")) {
    if (window.matchMedia("(min-width:800px)")) {
        document.getElementById("invtable").style.display = "block";
    } else {
        document.getElementById("invtable").style.display = "none";
    }
}
  
 <div class="widget widget-table action-table" id="invtable">
    <div class="widget-header"> <i class="icon-th-list"></i>
        <h3>Últimos Podcasts</h3>
    </div>
    <!-- /widget-header -->
    <div class="widget-content">
        <table class="table table-striped table-bordered">
            <thead>
                <tr style="width:300px">
                    <th> Nº</th>
                    <th> Título da Postagem </th>
                    <th> DATA</th>
                    <th> Link</th>
                    <th> Descrição</th>
                    <th class="td-actions"> </th>
                </tr>
            </thead>
            <tbody>               
            </tbody>
        </table>
    </div>
    <!-- /widget-content --> 
</div>

Мне нужно, чтобы эта html-таблица исчезла, поскольку она не реагирует на мобильные устройства.

Я попытался использовать window.matchMedia, который эквивалентен медиа-запросам, но, к сожалению, я не получил ожидаемого результата.

Комментарии:

1. нужно ли это делать в JS?, в css вы можете использовать @media screen and (min-width:800px) { // code}

2. Здравствуйте, да, но, к сожалению, я получил код для модели и не понял его наилучшим образом

3. используйте screen.width , if (screen.width > 800px) { //code }

4. Что вы подразумеваете под «не отвечает на мобильное устройство»?

5. <div style="overflow-x:auto;"> <table> NOW TABLE DOESN'T HAVE TO BE HIDDEN </table> </div>

Ответ №1:

Вам нужно проверить наличие .matches 

   if (window.matchMedia("(min-width:800px)").matches) {
    document.getElementById("invtable").style.display = "block";
  } else {
    document.getElementById("invtable").style.display = "none";
  }

Комментарии:

1. codepen.io/andreasschrottenbaum/pen/eYzbPmw работает на меня

2. Я увидел, что это сработало, большое вам спасибо, вы понятия не имеете, как вы мне помогли.