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

Question

我正在用python开发一个web应用程序，使用flask和sqlite3数据库。这是一个网络应用程序匿名欺凌报告在学校。在一个名为tablatestigos的路由中，我想显示一个包含数据库信息的表。表格的一个标题是一个下拉菜单（如按标题筛选），如果您选择例如课程5A，它应该只显示该课程的表格行，因此当我单击某个“光标”时，它只显示该课程的行。我希望它发生在日常生活中，所以我添加了一些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 %}

抱歉，如果这是一个noob问题，但我以前从未使用过javascript，这次必须使用它来继续我的项目：）