javascript - 被表格隐藏的下拉表格标题
问题描述
你好,我正在一个关于学校欺凌问题的网络应用程序中工作。我想显示一个带有欺凌报告的表格。一个表头是“Cursos”,它是一个包含所有学校课程的下拉菜单。问题是下拉菜单的一部分(从第三个选项或课程开始)被表格隐藏,但滚动条出现滚动到其余课程。我希望所有选项都出现,并且不希望使用滚动条来滚动课程。任何想法(我是编程新手,所以我对 css 不是很有经验,如果这是一个菜鸟问题,很抱歉 :))(在顶部我添加了问题的照片)这是我的 html:
{% extends "layout.html" %}
{% block title %}
Reportes de Victimas
{% endblock %}
{% block main %}
<h1 class="display-3">Reportes de Víctimas</h1>
<form action="/" method="post">
<table class="table table-striped" id="myTableVict">
<thead>
<tr>
<th>Escuela</th>
<th>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
<span class="caret"></span></button>
<div class="dropdown-content" id="divo">
<a href="#">Todos</a>
{% for hechito in hechitos %}
<a href="#">{{ hechito.curso }}</a>
{% endfor %}
</div>
</th>
<th>Descripción del hecho</th>
</tr>
</thead>
<tbody>
<!--for is to loop in each row of the table of the selected database,you have to use { always with a space at left and right and stock.nam the . because it is like opening a dict and chosing the column name -->
{% for hecho in hechos %}
<tr>
<td>{{ hecho.escuela }}</td>
<td>{{ hecho.curso }}</td>
<td>{{ hecho.hecho }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
<script>
var table = document.getElementById("myTableVict");
var inputs = table.getElementsByTagName("a");
// var rows = table.getElementsByTagName("tr");
var rows = table.tBodies[0].rows
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener("click", function () {
var selectedCourse = this.textContent.trim();
// alert(selectedCourse);
for (row of rows) {
let td = row.getElementsByTagName('td')[1]
if (!td) { continue }
let course = td.textContent.trim()
if (course === selectedCourse || selectedCourse == "Todos") {
row.style.removeProperty('display')
} else {
row.style.setProperty('display', 'none')
}
}
});
}
</script>
{% endblock %}
CSS:
/* Dropdown Button */
.dropbtn, #naco {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* boton 2 */
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
解决方案
你能检查一下你的代码吗: -
<thead>
<tr>
<th>Escuela</th>
<th>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
<span class="caret"></span></button>
<div class="dropdown-content" id="divo">
<a href="#">Todos</a>
{% for hechito in hechitos %}
<a href="#">{{ hechito.curso }}</a>
{% endfor %}
</div>
</th>
<th>Descripción del hecho</th>
</tr>
</thead>
在这段代码中你的 div:-
<div class="dropdown">
你没有完成这个,所以这就是显示问题的原因。</div>
到那时完成它就可以了
推荐阅读
- xamarin - 导航页面标题
- c# - 如何在实体框架中的计算列上创建非聚集索引?
- php - 创建元素组合
- python - 如何在 Python 中求解非线性方程组?
- c# - 如何在一个信号rest api“include_player_ids”参数中包含字符串列表或字符串数组
- c# - 组合框 selectedvalue 并覆盖 ToString() - MVVM WPF
- c# - 合并(联合)来自多个来源的数据
- ios - iOS Objective-C VoiceOver Updating Available Accessible Elements
- php - php 脚本托管在虚拟服务器上,被删除、重命名或损坏
- sql - 映射主键和外键