Показать таблицы с отсутствием отображения и блоком внутри sweetalert2 - PullRequest
Новая
       26

Показать таблицы с отсутствием отображения и блоком внутри sweetalert2

0 голосов
/ 23 февраля 2020

Я программирую HTML внутри подсластителя с помощью TypeScript, и я хочу показать и скрыть таблицу при нажатии на элемент списка. Я попытался с display none и display block, но он не работает.

У меня есть два разных div, один div имеет следующий список 

 '<div class="page" style="display:flex !important; flex-direction:row !important; height:100vh !important;">'+
        '<div class="sidebar" style="flex:1 !important; border:solid black 1px !important; height:100% !important;" >'+
           '<ul class="list-group">'+
            '<li class="list-group-item" for="show"><span>Acceso a Universal</span></li>'+// acceso a universal deberia mostrar la tabla al darle click pero no hace nada ppor lo mismo del style que falta de aplicar.
            '<input type="radio" id="show" name="group" style="display: none !important;">'+//creamor un radio para poder seleccionar desde el span
            '<li class="list-group-item" for="show1">Carga de Información</li>'+
            '<input type="radio" id="show1" name="group" style="display: none !important;">'+
            '<li class="list-group-item" for="show2">Reportes</li>'+
            '<input type="radio" id="show2" name="group" style="display: none !important;">'+
            '<li class="list-group-item" for="show3">Banco de Archivos</li>'+
            '<input type="radio" id="show3" name="group" style="display: none !important;">'+
            '<li class="list-group-item" for="show4">SITI</li>'+
            '<input type="radio" id="show4" name="group" style="display: none !important;">'+
         '</ul>'+
        '</div>'+

, а другой div имеет следующую таблицу 

'<div id="contenido" style="display:none !important;">'+'<table  class="table table-hover mb-0" style="border-collapse: separate !important;hight:border-spacing: 500px 500px!important;" >'+
            '<tr style="font-size: 12px !important;text-align:left !important;">'+
            '<th>Tipo de Permiso</th>'+'<th>Tipo de Permiso </th>'+'<th>Tipo de Permiso</th>'+'</tr>'+
            '<tr style=" font-size: 12px !important; text-align:left !important;"><td>'+accesoUniversal[0]+'</td>'+'<td>'+ accesoUniversal[1] +'</td><td>'+ accesoUniversal[2] +'</td></tr>'+'</table>'+'</div>'+

I на основе следующего примера https://codepen.io/sekane81/pen/XbEVYv

1 Ответ

0 голосов
/ 23 февраля 2020

Вам понадобится функция Javascript, чтобы изменить значение display таблицы. Некоторая функция onChange, которая использует значение отмеченного переключателя.

Пример Codepen работает только потому, что входы и затронутый DIV являются братьями и сестрами, поэтому вы можете использовать комбинатор братьев и сестер ~. Нет CSS метода продвижения через родителей, чтобы добраться до какого-то другого элемента.

...