0
I have a page that has two tables, and I have two buttons "option1" and "option2", one for each table.
I want to press the button "option1", keep the first table visivele leave invisible the second table, while pressing the button "option2" leave the second table visible and the first invisible.
I took some examples here on the forum to do with Javascript, but I could not make it work.
Follows my code:
<h2 class="col-md-12 d-md-flex justify-content-md-start h2-pagina">Avisos</h2>
<div class="col-md-12 d-md-flex justify-content-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Ativos
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">Expirados
</label>
</div>
</div>
<div class="container-fluid col-md-12 d-md-flex justify-content-md-center" style="max-width: 100%; overflow-x: auto; overflow-y: hidden;" id="ativos">
<table class="table table-bordered table-hover" style="background-color: white;">
<thead>
<tr>
<th style="vertical-align: middle;">Mensagem</th>
<th style="vertical-align: middle;">Data Inicial</th>
<th style="vertical-align: middle;">Data Final</th>
<th style="vertical-align: middle;">Tempo de Exibição</th>
<th colspan="2" style="background-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-top-color: rgb(220, 220, 220);"></th>
</tr>
</thead>
<tbody>
@foreach (var msgAtivas in ViewBag.MsgsAtivas)
{
<tr>
<td style="vertical-align: middle;">@msgAtivas.Mensagem</td>
<td style="vertical-align: middle;">@msgAtivas.DataInicial</td>
<td style="vertical-align: middle;">@msgAtivas.DataFinal</td>
<td style="text-align: center; vertical-align: middle;">@msgAtivas.Tempo segundos</td>
<!--Html.ActionLink(texto que será apresentado na página html, "página que vai ser direcionado ao ser clicado", new { codLinha = linha.CodLinha que será passado para a página que foi redirecionada})-->
<td style="text-align: center; vertical-align: middle;">
@Html.ActionLink("editar", "FormInsereAviso", new
{
codigo = msgAtivas.Codigo,
mensagem = msgAtivas.Mensagem,
tempo = msgAtivas.Tempo,
dataInicial = msgAtivas.DataInicial,
dataFinal = msgAtivas.DataFinal
})
</td>
<td style="text-align: center; vertical-align: middle;"><a style="color:red;" href="http://localhost:51270/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>
@*<td style="text-align: center"><a style="color:red;" href="http://www.acessoseg.com.br/PortalAraguaina/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>*@
</tr>
}
</tbody>
</table>
</div>
<div class="container-fluid col-md-12 d-md-flex justify-content-md-center" style="max-width: 100%; overflow-x: auto; overflow-y: hidden;" id="expirados">
<table class="table table-bordered table-hover" style="background-color: white;">
<thead>
<tr>
<th style="vertical-align: middle;">Mensagem</th>
<th style="vertical-align: middle;">Data Inicial</th>
<th style="vertical-align: middle;">Data Final</th>
<th style="vertical-align: middle;">Tempo de Exibição</th>
<th colspan="2" style="background-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-top-color: rgb(220, 220, 220);"></th>
</tr>
</thead>
<tbody>
@foreach (var MsgsExpiradas in ViewBag.MsgsExpiradas)
{
<tr>
<td style="vertical-align: middle;">@MsgsExpiradas.Mensagem</td>
<td style="vertical-align: middle;">@MsgsExpiradas.DataInicial</td>
<td style="vertical-align: middle;">@MsgsExpiradas.DataFinal</td>
<td style="text-align: center; vertical-align: middle;">@MsgsExpiradas.Tempo segundos</td>
<!--Html.ActionLink(texto que será apresentado na página html, "página que vai ser direcionado ao ser clicado", new { codLinha = linha.CodLinha que será passado para a página que foi redirecionada})-->
<td style="text-align: center; vertical-align: middle;">
@Html.ActionLink("reativar", "FormInsereAviso", new
{
codigo = MsgsExpiradas.Codigo,
mensagem = MsgsExpiradas.Mensagem,
tempo = MsgsExpiradas.Tempo,
dataInicial = MsgsExpiradas.DataInicial,
dataFinal = MsgsExpiradas.DataFinal
})
</td>
<td style="text-align: center; vertical-align: middle;"><a style="color:red;" href="http://localhost:51270/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>
@*<td style="text-align: center"><a style="color:red;" href="http://www.acessoseg.com.br/PortalAraguaina/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>*@
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Thanks Lucas! I managed to make it work with your solution!
– Diego Grossi