如何通过JavaScript点击行获取索引并动态显示Django对象？

为啥会出这问题？ #

Django模板的{{ }}变量是服务器端提前渲染的，等页面发送到浏览器、JavaScript开始执行时，服务器早就把模板里的变量处理完了。你写的{{ project.id.customer_name }}里的id是JS的动态变量，但服务器渲染时根本认不出它，只会把id当成字符串去解析，自然拿不到正确的值。而固定索引的{{ project.1.customer_name }}是服务器直接渲染好的静态内容，所以能正常显示。

两种解决办法 #

方法1：把project转成JSON给JS用 #

这是最通用的方案，把Django的project列表序列化成JSON，让JS直接操作这个数组：

1. 在模板里用json_script过滤器生成JSON数据：

{{ project|json_script:"project-data" }}

这个过滤器会自动生成一个<script>标签，id是project-data，里面存的是序列化后的JSON字符串。

2. 在JS里读取这个JSON，绑定点击事件：

// 拿到服务器传过来的项目数据
const projects = JSON.parse(document.getElementById('project-data').textContent);

// 给每一行加点击事件
document.querySelectorAll('table tr').forEach((row, index) => {
  row.onclick = function() {
    const selected = projects[index];
    // 这里就可以用selected.customer_name了
    console.log(selected.customer_name);
    // 比如把内容显示到页面上：
    // document.getElementById('show-name').innerText = selected.customer_name;
  };
});

注意：如果project是Django模型对象，要先转成可序列化的格式，比如用Project.objects.all().values()，这样json_script才能正常序列化。

方法2：给表格行加data属性直接存数据 #

如果数据不多，也可以直接把需要的属性存在表格行的data-*属性里：

{% for item in project %}
  <tr data-customer="{{ item.customer_name }}">
    <td>{{ item.customer_name }}</td>
    <!-- 其他列内容 -->
  </tr>
{% endfor %}

然后JS里点击行时直接取这个属性：

document.querySelectorAll('table tr').forEach(row => {
  row.onclick = function() {
    const name = this.dataset.customer;
    console.log(name);
  };
});

内容的提问来源于stack exchange，提问作者John Cruzado