Insert Event date into a table if page width is less than a given value

Question

What I want to do is when the width page is less than the value shown below it enters data-tablesaw-mode="stack on the site shown below! I am new in JavaScript but I need this for a project! Thank you to whom I help I am available to provide any information that is important.

What I intend to insert

 data-tablesaw-mode="stack"

Like I’m trying to do

<script>
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var table = document.getElementsById('table-hide');

if width<39.9375em {
   table. += "data-tablesaw-mode="stack";
}
</script>

HTML where I want to insert

<table id="table-hide" class="tablesaw tablesaw-stack">

Answer 1

To work as desired, you must put the document to listen to the event resize, create a function:

function screen_width() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if(width < 400) {
        // Adiciona o atributo
        tabela.setAttribute('data-tablesaw-mode', 'stack');
    } else {
        // Remove o atributo
        tabela.removeAttribute('data-tablesaw-mode');
    }
}

then place the document to listen to the event:

// Escuta o evento
window.addEventListener('resize', screen_width);

call the function to check when the page is loaded.

// Executa a primeira vez
screen_width();

Complete code:

var tabela = document.getElementById('table-hide');

function screen_width() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if(width < 400) {
        // Adiciona o atributo
        tabela.setAttribute('data-tablesaw-mode', 'stack');
    } else {
        // Remove o atributo
        tabela.removeAttribute('data-tablesaw-mode');
    }
}

// Escuta o evento
window.addEventListener('resize', screen_width);

// Executa a primeira vez
screen_width();

References:

• Eventtarget.addeventlistener()
• resize
• Element.setAttribute()
• Element removeAttribute()

Answer 2

Try to do so

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

if(width < 39.9375){ //Valor em pixeis
   document.getElementById('table-hide').setAttribute("data-tablesaw-mode", "stack");
}