Question

我正在使用flask和sqlite3数据库在python中开发一个Web应用程序。这是一个用于在学校匿名举报报告的网络应用程序。在一个名为tablatestigos的路由中，我想显示一个包含数据库信息的表。该表的标题之一是一个下拉菜单（如Filter By标题），如果您选择课程5A，则它应仅显示该课程的表行，因此当我单击某个“ curso”时，它将显示我只有它的行。我想让它发生变化，所以我添加了一些JavaScript，但是由于我从未使用过这种语言（我是第一次使用python编写代码，所以我在for循环中遇到了问题，因为在需要时行不会隐藏。我认为我设置的变量存在问题。该错误应该在function（）内部，因为我尝试在其中插入一个警报，并且该程序正常工作，但是当我添加所有变量和for循环时，

这是我的HTML脚本：

{% extends "layout.html" %}

{% block title %}
    Reportes de Testigos
{% endblock %}

{% block main %}

    <form action="/" method="post">
        <table class="table table-striped" id="myTable">
        <thead>
            <tr>
                <th>Escuela</th>
                <th>Curso</th>
                <th>Victima</th>
                <th>Descripción del hecho</th>
                <th>
          <!-- (con movimiento mouse)       <div class="dropdown">
  <button class="dropbtn">Cursos</button>
  <div class="dropdown-content">
    {% for hecho in hechos %}
    <a onclick="myFunction()" id="myInput" href="#">{{ hecho.curso }}</a>
{% endfor %}
  </div>
</div> -->
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Todos
                      <span class="caret"></span></button>
                      <div class="dropdown-content">
                        {% for hecho in hechos %}
                        <a onclick="return myFunction();" id="myInput" href="#">{{ hecho.curso }} </a>
                        {% endfor %}

                  </div>
                </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.victima }}</td>
                    <td>{{ hecho.hecho }}</td>

                </tr>
            {% endfor %}

        </tbody>
    </table>
    </form>

 <script>
    function myFunction() {
      // Declare variables
      var input, table, tr, td, i, txtValue;
    //  input = document.getElementById("myInput");
      table = document.getElementById("myTable");
      input = table.getElementById("myInput");
      tr = table.getElementsByTagName("tr");
      inputTwo = input.textContent || input.innerText;
      // Loop through all table rows, and hide those who don't match the dropdown query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase() == inputTwo) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }

      }
    }
    </script>
{% endblock %}

对不起，如果这是一个菜鸟问题，但是我以前从未使用过javascript，这次必须使用它来继续我的项目：）

for循环的Javascript问题（与sqlite3数据库结合）

0 个答案: