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

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

但是我无法将jinja变量发送到javascript，而且当我写这篇文章时，我意识到我也不知道如何在javascript中访问数据。欢迎提供任何帮助。

顺晟科技：

不能将jinja变量直接传递给javascript，必须将其注入到html中，如下所示:

您的代码应该如下所示:

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

在示例中，我使用了变量，但如果必须使用对象中包含的值，则只需替换为:

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