本文介绍如何在 Django 模板中利用 JavaScript 为表格动态生成序号。通过遍历表格行并操作 DOM 元素，实现序号的自动填充与更新，适用于需要实时交互的数据展示场景。
Django 结合 JS 实现表格动态序号生成
在 Django 项目中，有时需要在前端表格中动态显示序号。以下是一个结合 JavaScript 实现该功能的实例。
<table class="table table-striped">
<thead>
<tr class="key_words_head">
<th>序号</th>
<th>类目</th>
<th>关键词</th>
<th>操作</th>
</tr>
</thead>
<tbody id="key_words_body">
{% for keywords in classify_keywords_obj %}
<tr class="key_words_tbody">
<td id="td_num"></td>
<td id="hide_id">{{ keywords.id }}</td>
<td id="td_classify">{{ keywords.classify.classify_name }}</td>
<td id="td_keywords">{{ keywords.keywords }}</td>
<td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="show_change_model('{{ keywords.id }}')">编辑</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" style="color: red" onclick="del_settings('{{ keywords.id }}',this)">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
function xu_hao() {
var oTable = $('tr.key_words_tbody').length;
for (var i = 0; i < oTable + 1; i++) {
$('tr.key_words_tbody').eq(i).children("td#td_num").empty();
$('tr.key_words_tbody').eq(i).children("td#td_num").append(i + 1);
}
}
</script>总结
上述内容展示了 Django 与 JavaScript 配合实现表格动态序号的具体代码。希望这对您有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！如果您觉得本文有用，欢迎转载，请注明出处，谢谢！