使用 JavaScript 使表格消失

Question

These are the Js and Html codes:

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>

I need this html table to disappear, as it does not respond to mobile devices.

I tried to use window.matchMedia, which is equivalent to Media Queries, but unfortunately I didn't get the expected result.

Answer 1

You need to check for .matches

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