如何将 jinja 变量发送到 javascript答案

【问题标题】：How to send jinja variable to java script如何将 jinja 变量发送到 javascript
【发布时间】：2021-07-19 19:58:42
【问题描述】：

<table>
    <tr>
        <th>ID</th>
        <th>Type</th>
        <th>Name</th>
        <th>Start Date</th>
        <th>Target Date</th>
        <th>Estimate</th>
        <th>Status</th>
        <th>Actual Hours</th>
        <th>Approved Hours</th>
        <th>Start Date</th>
        <th>Target Date</th>
    </tr>
    {% for val in details %}
        <tr>
            <td><button id={{loop.index}} onclick=myFunction(this)>{{loop.index}}</button>{{val['id']}}</td>
            
            <td>{{val['type']}}</td>
            <td>{{val['name']}}</td>
            <td>{{val['start_date']}}</td>
            <td>{{val['target_date']}}</td>
            <td>{{val['estimate']}}</td>
            <td>{{val['status']}}</td>
            <td>{{val['timesheet_details']['actual_hours']}}</td>
            <td>{{val['timesheet_details']['approved_hours']}}</td>
            <td>{{val['timesheet_details']['actual_start_date']}}</td>
            <td>{{val['timesheet_details']['actual_target_date']}}</td>
        </tr>
    {% endfor %}
</table>
<script>
    function myFunction(z){
        var currTR = z.parentNode.parentNode;
        var newTR = document.createElement("tr");
        newTR.innerHTML = "<td>s</td><td>Col 2</td><td>Col 3</td>";
        currTR.parentNode.insertBefore(newTR, currTR.nextSibling);          
    }
    function some(x){
        
    }
</script>

目标是每次我按下按钮时，它都应该向我的函数发送一些数据，用于即将添加的新行，并且该函数的值将是新行应该添加的 td。

onclick=myFunction(this,{{val}})

...
<script>
function myFunction(z,l)
...
        newTR.innerHTML = "<td>l[2]</td><td>l[3]</td><td>l[4]</td>";

</script>

但我无法将 jinja 变量发送到 javascript，在我写这篇文章时，我意识到我也不知道如何在 javascript 中访问数据。任何帮助表示赞赏。

【问题讨论】：

Javascript 没有什么神奇之处，它只是模板的一部分。您的问题是您使用的引号不正确，即尝试var l = '{{ val }}';
这行得通，但我意识到 val 是在 for 循环中创建的变量，所以它会在点击时终止

标签： javascript html flask jinja2

【解决方案1】：

您不能直接将 jinja 变量传递给 javascript，您必须将其注入到您的 html 中，如下所示：<button id={{jinja_var}} onclick=myFunction({{jinja_var}})>

您的代码应如下所示：

<table>
    <tr>
        <th>ID</th>
        <th>Type</th>
        <th>Name</th>
        <th>Start Date</th>
        <th>Target Date</th>
        <th>Estimate</th>
        <th>Status</th>
        <th>Actual Hours</th>
        <th>Approved Hours</th>
        <th>Start Date</th>
        <th>Target Date</th>
    </tr>
    {% for val in details %}
        <tr>
            <td><button id={{loop.index}} onclick=myFunction({{loop.index}})>{{loop.index}}</button>{{val['id']}}</td>
            
            <td>{{val['type']}}</td>
            <td>{{val['name']}}</td>
            <td>{{val['start_date']}}</td>
            <td>{{val['target_date']}}</td>
            <td>{{val['estimate']}}</td>
            <td>{{val['status']}}</td>
            <td>{{val['timesheet_details']['actual_hours']}}</td>
            <td>{{val['timesheet_details']['approved_hours']}}</td>
            <td>{{val['timesheet_details']['actual_start_date']}}</td>
            <td>{{val['timesheet_details']['actual_target_date']}}</td>
        </tr>
    {% endfor %}
</table>
<script>
    function myFunction(z){
        var currTR = z.parentNode.parentNode;
        var newTR = document.createElement("tr");
        newTR.innerHTML = "<td>s</td><td>Col 2</td><td>Col 3</td>";
        currTR.parentNode.insertBefore(newTR, currTR.nextSibling);          
    }
    function some(x){
        
    }
</script>

在示例中我使用了变量{{loop.index}}，但如果您必须使用对象val 中包含的值，只需将{{loop.index}} 替换为{{val['my_value']}}：

<button id={{loop.index}} onclick=myFunction({{val['my_value']}})>{{loop.index}}</button>

【讨论】：