帶變量的燒瓶jinja2表生成

Question

我想動態過濾燒瓶生成的表，這要歸功於JavaScript中另一個類似表中設置的變量。

不幸的是，似乎Javascript變量無法在Jinja2上下文中重用（因為jinja2上下文在Javascript之前運行）。

在下面的示例中，我想使用project_id過濾任務。 設置此project_id的原因是在另一個表中選擇的值。

注意：由於此解決方案，我想避免重新加載頁面。

    {% for Task in mytasks %}
    {% if Task.project_id == var_project_id %} <- Not working, the javascript variable is not recognized 
        <tr class="clickable-row">
        <td style="display:none;"> {{ Task.task_id }} </td>
        <td style="display:none;"> {{ Task.project_id }} </td>
        <td>{{ Task.title }}</td>
        <td class="task_description" > {{ Task.description }} </td>
        <td class="task_creation_date"> {{ Task.creation_date }} </td>
        </tr>
  {% endfor %}

Answer 1

我已經找到了解決方案，這要歸功於簡單的javascript函數。

就是這樣，以防萬一其他人有相同的問題：

<script>    
//The project id is defined when the project is selected in a hover table
$('#myTableProject tbody tr').click(function (event) {
$('tr').not(this).removeClass('highlight');
$(this).addClass('highlight');
project_id = $(this).find('td.project_id').text();
//...
var tableTasks;
tableTasks = document.getElementById("myTableTasks");
tr = tableTasks.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];// [1] is the column number you want to filter
if (td) {
  //each cell of the column [1] is compared to the project id
  if (td.innerHTML.toUpperCase().indexOf(project_id) > -1) {
    tr[i].style.display = "";//the data is displayed
  } else {
    tr[i].style.display = "none";//the data is hidden
  }
} }
</script>

更多信息： https : //www.w3schools.com/howto/howto_js_filter_table.asp