使用Django/JS/jQuery为datatables表格行添加详情跳转链接的方法

你原有代码失效的核心原因是不符合HTML语法规范：<tr> 标签的直接子元素只能是 <td> 或 <th>，浏览器解析时会自动把你嵌套在 <tr> 和 <td> 之间的 <a> 标签移出表格结构，自然无法触发跳转。

以下是三种可直接落地的实现方案：

方案1：纯Django模板实现（最推荐，无JS依赖） #

这个方案不需要引入任何前端脚本，兼容性最好，也符合SEO规范。
首先先调整你的详情页路由，确保路由可以接收唯一标识机器的参数（示例用devEUI作为参数，你也可以替换为机器的主键id）：

# urls.py
path('machine/detail/<str:dev_eui>/', 你的视图函数, name='details_of_element')

然后修改模板代码，把<a>标签放在每个<td>内部，设置样式让<a>占满整个<td>区域，实现整行点击跳转：

<div class="card-body">
    <div class="table-responsive">
        <table id="datatables" class="table table-striped table-bordered text-nowrap w-100">
            <thead>
                <tr>
                    <th class="wd-15p">devEUI</th>
                    <th class="wd-15p">appID</th>
                    <th class="wd-20p">Type machine</th>
                    <th class="wd-20p">Date création</th>
                </tr>
            </thead>
            <tbody>
                {% for machine in machines %}
                    <tr style="cursor: pointer;">
                        <td>
                            <a href="{% url 'details_of_element' dev_eui=machine.devEUI %}" style="display:block; color: inherit; text-decoration: none; width: 100%; height: 100%; padding: 0.75rem;">
                                {{machine.devEUI}}
                            </a>
                        </td>
                        <td>
                            <a href="{% url 'details_of_element' dev_eui=machine.devEUI %}" style="display:block; color: inherit; text-decoration: none; width: 100%; height: 100%; padding: 0.75rem;">
                                {{machine.appID}}
                            </a>
                        </td>
                        <td>
                            <a href="{% url 'details_of_element' dev_eui=machine.devEUI %}" style="display:block; color: inherit; text-decoration: none; width: 100%; height: 100%; padding: 0.75rem;">
                                {{machine.type_machine}}
                            </a>
                        </td>
                        <td>
                            <a href="{% url 'details_of_element' dev_eui=machine.devEUI %}" style="display:block; color: inherit; text-decoration: none; width: 100%; height: 100%; padding: 0.75rem;">
                                {{machine.date_creation}}
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

你也可以把a标签的样式抽成公共CSS类，避免重复写内联样式。

方案2：jQuery实现 #

如果不想重复写a标签，可以用jQuery监听行点击事件实现跳转：
首先给tr添加自定义属性存储跳转链接：

{% for machine in machines %}
    <tr data-href="{% url 'details_of_element' dev_eui=machine.devEUI %}" style="cursor: pointer;">
        <td>{{machine.devEUI}}</td>
        <td>{{machine.appID}}</td>
        <td>{{machine.type_machine}}</td>
        <td>{{machine.date_creation}}</td>
    </tr>
{% endfor %}

然后添加jQuery脚本：

$(document).ready(function() {
    // 监听行点击事件
    $('#datatables tbody tr').click(function(e) {
        const targetUrl = $(this).data('href');
        // 支持ctrl/command按键点击时新标签页打开
        if (e.ctrlKey || e.metaKey) {
            window.open(targetUrl, '_blank');
        } else {
            window.location.href = targetUrl;
        }
    });
});

方案3：原生JavaScript实现 #

不想引入jQuery依赖的话可以用原生JS实现，逻辑和jQuery方案一致：

document.addEventListener('DOMContentLoaded', function() {
    const tableRows = document.querySelectorAll('#datatables tbody tr');
    tableRows.forEach(row => {
        row.style.cursor = 'pointer';
        row.addEventListener('click', function(e) {
            const targetUrl = this.getAttribute('data-href');
            if (e.ctrlKey || e.metaKey) {
                window.open(targetUrl, '_blank');
            } else {
                window.location.href = targetUrl;
            }
        });
    });
});

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