Django实现点击ETF链接动态加载对应基准指数图表

1. 更新URL配置（urls.py） #

给charts页面添加带参数的路由，让它能接收index_ticker参数：

from django.urls import path
from . import views

urlpatterns = [
    path('etf-table/', views.etf_table, name='etf_table'),
    # 新增带index_ticker参数的charts路由
    path('charts/<str:index_ticker>/', views.etf_charts, name='etf_charts'),
]

2. 修改表格模板（table.html） #

把每一行ETF数据改成可点击的跳转链接，将当前行的index_ticker作为参数传递给charts页面：

<table>
    <thead>
        <tr>
            <th>ETF代码</th>
            <th>ETF名称</th>
            <th>对应指数</th>
        </tr>
    </thead>
    <tbody>
        {% for etf in etf_list %}
        <!-- 点击整行跳转到对应charts页面 -->
        <tr onclick="window.location='{% url 'etf_charts' etf.index_ticker %}';" style="cursor: pointer;">
            <td>{{ etf.etf_ticker }}</td>
            <td>{{ etf.etf_name }}</td>
            <td>{{ etf.index_name }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

如果不想用JS，也可以把单元格内容包在<a>标签里：

<tr>
    <td><a href="{% url 'etf_charts' etf.index_ticker %}">{{ etf.etf_ticker }}</a></td>
    <td><a href="{% url 'etf_charts' etf.index_ticker %}">{{ etf.etf_name }}</a></td>
    <td><a href="{% url 'etf_charts' etf.index_ticker %}">{{ etf.index_name }}</a></td>
</tr>

3. 调整视图函数（views.py） #

修改charts视图，接收index_ticker参数并传递给模板，同时可添加参数合法性校验：

from django.shortcuts import render
from .models import ETF

def etf_table(request):
    # 原逻辑：获取所有ETF数据
    etf_list = ETF.objects.all()
    return render(request, 'table.html', {'etf_list': etf_list})

def etf_charts(request, index_ticker):
    # 可选：校验index_ticker是否存在，避免无效请求
    try:
        ETF.objects.get(index_ticker=index_ticker)
    except ETF.DoesNotExist:
        # 可返回404页面或自定义提示
        return render(request, '404.html')
    
    # 将index_ticker传给模板用于生成图表路径
    return render(request, 'charts.html', {'index_ticker': index_ticker})

4. 动态渲染图表（charts.html） #

用传入的index_ticker变量动态拼接四张图表的静态文件路径：

<div class="charts-container">
    <img src="{% static 'charts/chart1_'|add:index_ticker|add:'.jpg' %}" alt="{{ index_ticker }} 图表1">
    <img src="{% static 'charts/chart2_'|add:index_ticker|add:'.jpg' %}" alt="{{ index_ticker }} 图表2">
    <img src="{% static 'charts/chart3_'|add:index_ticker|add:'.jpg' %}" alt="{{ index_ticker }} 图表3">
    <img src="{% static 'charts/chart4_'|add:index_ticker|add:'.jpg' %}" alt="{{ index_ticker }} 图表4">
</div>

注意：确保图表文件都放在static/charts/目录下，且项目已正确配置STATIC_URL和STATICFILES_DIRS。

额外优化建议 #

• 给表格行添加hover样式，提升交互体验：

tr:hover {
    background-color: #f5f5f5;
}

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