Question

我目前正在努力使用Django和javascript。

我有一个HTML表格。每行对应一个从SQL数据库加载的Django元素。

这样的事情：

    <table>
    {% for item in list %}

        <tr tabindex="0" 
            data-toggle="popover" 
            data-trigger="focus" 
            data-popover-content=".hidden" 
            data-placement="right"
            onclick="snpTable()"
            >
            <td>{{ item.elem1 }}</td>
            <td>{{ item.elem2 }}</td>
            <td>{% for t in item.elem3_list %}
                {{t}}<br/>
                {% endfor %}
            </td>

现在，当我点击一行时，我想要一个新表格，显示有关此项目的所有剩余信息。我正在使用的平台使用bootstrap，并且由于其他SO问题，我已经能够在单击一行时显示一个表。基本上，每行的最后一个案例包含一个默认隐藏的div，它包含表。我使用bootstrap的popover方法在单击时显示它。

               <div class="hidden">
                    <div class="popover-heading">
                        <!-- Just a heading with an element from the list -->
                    </div>
                    <div class="popover-body">
                        <table style="width:100%">
                            <tr><td>{{ item.elem4 }}</td></tr>
                            <tr><td>{{ item.elem5 }}</td></tr>
                            <tr><td>{{ item.elem6 }}</td></tr>
                            <tr><td>{{ item.elem7 }}</td></tr>
                            <tr><td>{{ item.elem8 }}</td></tr>
                            <tr><td>{{ item.elem9 }}</td></tr>
                            <tr><td>{{ item.elem10 }}</td></tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    <script>$("[data-toggle='popover']").popover('destroy'); </script>
{% endfor %}
</table>

没什么特别的，对吗？元素4,5等依次加载，但仅在单击时显示。好吧，它不起作用。项目1到3完全加载，每个数据库项目有一行。但是，单击这些行时显示的表总是相同的，无论元素如何，只显示第一个元素的信息。

我希望我足够清楚。当我点击一行时，我应该有一个弹出表，其中包含每个项目的附加信息，但我只有第一项的信息。

以下是我尝试设置的JSfiddle，因为django没有用。

是的，有人可以帮帮我吗？我完全不明白为什么没有为每一行更新第二个表。

编辑：问题解决了！我需要给div一个动态id，例如id="{{ item.elem1 }}"。然后我为每个ID调用JS函数。

Django＆amp; javascript：隐藏的div动态更新

0 个答案: