How do I make a cell to be a button in a table?

Asked

Viewed 453 times

-2

<div id=table>
  <tr id="tablebottom">
        <th>
            <h5>Hoje</h5> 
        </th>
        <th>
            <h5>Amanhã</h5>
        </th>
  </tr> 
</div>

My question is how to make all the cell a button that opens a div that is not visible. That is, when clicking by ex in today appears a div over the table with more information inherent to the day..

Can someone help me??

inserir a descrição da imagem aqui

javascript html table button

  • Can you use Jquery? What do you want to do with the button?

  • Friend without code gets complicated. Put what you have there html/css/etc... and it is easier to answer you

  • @i_like_trans what I want is that by clicking on "today" "tomorrow" etc a kind of pop-up (or a page-centered div) will appear that will contain more information within that div

1 answer

0


From what I understand, that’s more or less what you need, just implement in your need.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
    .container{
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        height: 500px;
        width: 80%;
        margin: 100px auto 0;
        background: #e3e3e3;
        grid-auto-rows: 75% 25%;
    }

    .container-aux{
        height: 375px;
        width: 80%;
        margin: 100px auto 0;
        background: white;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid black;
    }

    .container{
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        height: 500px;
        width: 80%;
        margin: 100px auto 0;
        background: #e3e3e3;
        grid-auto-rows: 75% 25%;

    }

    .item{
        border: 2px solid black;
    }

    .hidden{
        display: none;
    }

</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item item-link" data-dia="1">Hoje</div>
    <div class="item item-link" data-dia="2">Amanhã</div>
    <div class="item item-link" data-dia="3">Sáb</div>
    <div class="item item-link" data-dia="4">Dom</div>
    <div class="item item-link" data-dia="5">Seg</div>
    <div class="item item-link" data-dia="6">Ter</div>
    <div class="item item-link" data-dia="7">Quar</div>
</div>


<div class="container-aux dia1 hidden">Previsão de Hoje</div>
<div class="container-aux dia2 hidden">Previsão de Amanhã</div>
<div class="container-aux dia3 hidden">Previsão de Sabado</div>
<div class="container-aux dia4 hidden">Previsão de Domingo</div>
<div class="container-aux dia5 hidden">Previsão de Segunda</div>
<div class="container-aux dia6 hidden">Previsão de Terça</div>
<div class="container-aux dia7 hidden">Previsão de Quarta</div>


<script>
    $('.item').on('click', function(){
        let dia = $(this).data('dia');

        $.each($('.container-aux'), function(){
            if(!$(this).hasClass('hidden')){
                $(this).addClass('hidden');
            }
        });

        console.log($('.dia'+dia));
        $('.dia'+dia).removeClass('hidden');

    })
</script>

Browser other questions tagged javascript html table button

You are not signed in. Login or sign up in order to post.