如何将 jinja 变量发送到 java 脚本

Question

<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 中的数据。感谢您的帮助。

Answer 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>

如何将 jinja 变量发送到 java 脚本

How to send jinja variable to java script

html

javascript

jinja2

flask