Javascript 带变量的Flask jinja2表格生成
由于JavaScript中的一个变量集来自另一个类似的表,我想动态过滤一个flask生成的表 不幸的是,似乎Javascript变量不能在Jinja2上下文中重用,因为Jinja2上下文在Javascript之前运行 在下面的示例中,我想用project_id筛选任务。由于在另一个表中选择了值,所以设置了此project_id 注意:由于此解决方案,我希望避免重新加载页面Javascript 带变量的Flask jinja2表格生成,javascript,variables,dynamic,jinja2,Javascript,Variables,Dynamic,Jinja2,由于JavaScript中的一个变量集来自另一个类似的表,我想动态过滤一个flask生成的表 不幸的是,似乎Javascript变量不能在Jinja2上下文中重用,因为Jinja2上下文在Javascript之前运行 在下面的示例中,我想用project_id筛选任务。由于在另一个表中选择了值,所以设置了此project_id 注意:由于此解决方案,我希望避免重新加载页面 {% for Task in mytasks %} {% if Task.project_id == var
{% 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 %}
多亏了一个简单的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>
更多信息:
你忘了问一个实际的问题。另外,当JavaScript在客户端运行时,AFAIK Jinja在服务器端进行处理,因此您需要使用基于JavaScript的东西,无论是香草JS、jQuery还是完整的前端框架。多谢了,现在已经清楚多了。你有在引导中使用悬停表的例子吗?