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

Question

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

Navigation

#1 by (0 votes)

-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 the whole cell a button that opens a div that is not visible. That is, when clicking for ex in today appears a div over the table with more information inherent to the day ..

Can someone help me?

javascript html table button

asked by anonymous 30.11.2017 / 17:10

1 answer

Pick 1 record per date without repeating the date endpoint to filter post by custom taxonomy

score 0 · Accepted Answer

As I understand it, this is more or less what you need, only 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:autoautoautoautoautoautoauto;height:500px;width:80%;margin:100pxauto0;background:#e3e3e3;grid-auto-rows:75%25%;}.container-aux{height:375px;width:80%;margin:100pxauto0;background:white;position:absolute;top:0;left:0;right:0;bottom:0;border:2pxsolidblack;}.container{display:grid;grid-template-columns:autoautoautoautoautoautoauto;height:500px;width:80%;margin:100pxauto0;background:#e3e3e3;grid-auto-rows:75%25%;}.item{border:2pxsolidblack;}.hidden{display:none;}</style><divclass="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>