在 javascript 或 jquery 中添加指向数据表行的链接答案

【问题标题】：adding links to data table rows in javascript or jquery在 javascript 或 jquery 中添加指向数据表行的链接
【发布时间】：2021-10-30 21:54:41
【问题描述】：

我正在使用 django。这是我的代码：

<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>
                        <a href="{% url 'details_of_element' %}">
                            <td>{{machine.devEUI}}</td>
                            <td>{{machine.appID}}</td>
                            <td>{{machine.type_machine}}</td>
                            <td>{{machine.date_creation}}</td>
                        </a>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

它不起作用。我想为每一行添加一个链接以查看每个项目的详细信息。我如何使用 django、jquery 或 javascript 做到这一点？

【问题讨论】：

标签： javascript jquery django

【解决方案1】：

对于 detail_view，需要一些标识才能在 Django 中获取模型的特定实例。通常它是唯一的主键，例如 id。要指定此标识，我们需要在您的应用的urls.py 中定义它。

urls.py

from django.urls import path

# importing views from views..py
from .views import detail_view

urlpatterns = [
    path('<id>', detail_view, name='details_of_element' ),
]

views.py

from django.shortcuts import render

# relative import of Model
from .models import Machine

# pass id attribute from urls
def detail_view(request, id):
    machine = Machine.objects.get(id = id)
    return render(request, "detail_view.html", {'machine': machine})

machine_list.html

<tbody>
    {% for machine in machines %}
        <tr>
            <a href="{% url 'details_of_element' machine.id %}">
                <td>{{machine.devEUI}}</td>
                <td>{{machine.appID}}</td>
                <td>{{machine.type_machine}}</td>
                <td>{{machine.date_creation}}</td>
            </a>
        </tr>
    {% endfor %}
</tbody>

【讨论】：

谢谢，但问题出在超文本链接（href）上。它不起作用。
过去你的 urls.py 和 html 文件
可以确认这样的表格确实有效。我有一些。根据此答案，每个链接都需要包含表格行中汇总的实体的标识。

【解决方案2】：

我用下面的代码解决了这个问题

<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 data-href="{% url 'details_url' %}">
                       
                        <td>{{machine.devEUI}}</td>
                        <td>{{machine.appID}}</td>
                        <td>{{machine.type_machine}}</td>
                        <td>{{machine.date_creation}}</td>
                       
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
        document.addEventListener("DOMContentLoaded",() =>{
            const rows = document.querySelectorAll("tr[data-href]");
            rows.forEach(row => {
                row.addEventListener("click", () => {
                    window.location.href = row.dataset.href;
                });
            });
        });
    </script>

【讨论】：