Django模板html javascript 循环输出表格，点击某行的按钮下拉详情，还可以收起。

Django模板html javascript 循环输出表格，点击某行的按钮下拉详情，还可以收起。仔细看代码中的注释！

<table border="1">
    {% for i in resultDic %}
        <tr class="{% cycle 'altrow' '' %}">
            <td>{{ i.rank }}</td>
            <td>{{ i.similarity }}</td>
            <td>{{ i.tariff }}</td>
            <td>{{ i.HS1 }}<input type="button" value="详情"/>
{#                style 一定要写在div里面，不能写在head里，否则无效！#}
                <div class="HS2" style="display: none">{{ i.HS2 }}</div>
            </td>
        </tr>
    {% endfor %}
</table>

    <script type="text/javascript">
        window.onload = function () {
            {#获取所有的input标签放到一个有序的集合中#}
            var stn = document.getElementsByTagName("input")
            {#有多少个input标签就定义多少个点击函数，这一步很重要，你懂得，重要的事不用说三遍！#}
            for (var i = 0; i < stn.length; i++) {
                stn_click(i)
            }
            {#定义每个函数#}
            function stn_click(i) {
                stn[i].onclick = function (e) {
                    {#获取当前标签的下一个标签#}
                    var HS2 = e.target.nextElementSibling
                    {#对标签的display进行判断，并改变标签的属性#}
                    if (HS2.style.display == "block") {
                        HS2.style.display = "none"
                        e.target.value = "详情"
                    } else {
                        HS2.style.display = "block";
                        e.target.value = '收起'
                    }
                }
            }
        }
    </script>

 简单吧！我在网上找了几天愣是没找到，只能自己做，如果你觉得有用请点个赞吧，我永远不会收费，希望你也一样，创业路上请多帮助！！！