Html 单击表中的超链接时调用模态

我有以下HTML代码-

<div id="one">
    <div class="card shadow mb-4" style="width:98%;margin-left:1%;">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">XXXXXXXXXXXXXX</h6>
        </div>
        <div class="card-body" style="width:100%;">
            <table id="table_id" class="order-column">
                <thead>
                <tr>
                    <th>AAAAAAAAAAA</th>
                    <th>BBBBBBBBBBB</th>
                    <th>CCCCCCCCCCC</th>
                    <th>ObjectLink</th>
                </tr>
                </thead>
                <tbody>
                {% for ele in data %}
                <tr>
                    {% for k,v in ele.items%}
                    {%ifnotequal k fail %}
                    <td>{{v}}</td>
                    {%else%}

                    <td style="text-decoration: underline;color:blue;"><a href="#mymodal" data-toggle="modal">Object</a></td>
                    <!-- Modal -->
                    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="vertical-alignment-helper">
                            <div class="modal-dialog vertical-align-center">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">Object Content</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>{{v}}</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            Close
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% endifnotequal%}
                    {% endfor %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

XXXXXXXXXXXXX
AAAAAAAAAAAA
bbbbbbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
对象链接
{数据%中的元素为%1}
{ele.items%中k，v的百分比}
{%ifnotequal k fail%}
{{v}
{%else%}
对象内容
{{v}

接近
{%endifnotequal%}
{%endfor%}
{%endfor%}

在这里，当我点击“对象”超链接时，它会显示一个不同行的值。我面临的问题是，所有的超链接只显示第一行的内容

我的问题可能与的类似/重复，但如果有人能帮助我的话，我无法在代码中实现这一点

---

提前感谢。

我不确定您使用的模板系统是什么，但我在您的循环中看到了这一点：

<a href="#mymodal" data-toggle="modal">Object</a>
...
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" ...

---

在生成ancho和div的循环中，您将向div id-id=“mymodal{{k}}”添加密钥，对于anchor href-href=“#mymodal{{k}”这应该会起到作用

最后使用“forloop.counter”工作，下面是相同的代码-

<div class="card shadow mb-4" style="width:98%;margin-left:1%;">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">XXXXXXXXXXXXXXXXXXXXXXXXX</h6>
        </div>
        <div class="card-body" style="width:100%;">
            <table id="table_id" class="order-column">
                <thead>
                <tr>
                    <th>AAAAAAAAAAAAAAA</th>
                    <th>BBBBBBBBBBBBB</th>
                    <th>CCCCCCCCCCCCC</th>
                    <th>ObjectLink</th>
                </tr>
                </thead>
                <tbody>
                {% for ele in data %}
                {% with my_var=forloop.counter %}

                <tr>
                    {% for k,v in ele.items%}

                    {%ifnotequal k fail %}
                    <td>{{v}}</td>
                    {%else%}
                    <td style="text-decoration: underline;color:blue;"><a href="#mymodal{{my_var}}" data-toggle="modal">Object</a></td>
                    <!-- Modal -->
                    <div class="modal fade" id="mymodal{{my_var}}" tabindex="-1" data-replace="true" role="dialog"
                         aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="vertical-alignment-helper">
                            <div class="modal-dialog vertical-align-center">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">Object Content</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>{{v}}</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            Close
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% endifnotequal%}
                    {% endfor %}
                </tr>
                {% endwith %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

XXXXXXXXXXXXXXXXXXXXXX
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
对象链接
{数据%中的元素为%1}
{%with my_var=forloop.counter%}
{ele.items%中k，v的百分比}
{%ifnotequal k fail%}
{{v}
{%else%}
对象内容
{{v}

接近
{%endifnotequal%}
{%endfor%}
{%endwith%}
{%endfor%}

---

干杯

谢谢您的回复，但这并没有帮助…问题仍然存在。我正在使用django模板。那么问题解决了吗？因为我看不到代码有任何其他问题…不，问题仍然存在，所有超链接的模式内容都是相同的。那么现在你有不同的模式ID了吗？你能在调试器中检查这个吗？

{% for k,v in ele.items%}

<div class="card shadow mb-4" style="width:98%;margin-left:1%;">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">XXXXXXXXXXXXXXXXXXXXXXXXX</h6>
        </div>
        <div class="card-body" style="width:100%;">
            <table id="table_id" class="order-column">
                <thead>
                <tr>
                    <th>AAAAAAAAAAAAAAA</th>
                    <th>BBBBBBBBBBBBB</th>
                    <th>CCCCCCCCCCCCC</th>
                    <th>ObjectLink</th>
                </tr>
                </thead>
                <tbody>
                {% for ele in data %}
                {% with my_var=forloop.counter %}

                <tr>
                    {% for k,v in ele.items%}

                    {%ifnotequal k fail %}
                    <td>{{v}}</td>
                    {%else%}
                    <td style="text-decoration: underline;color:blue;"><a href="#mymodal{{my_var}}" data-toggle="modal">Object</a></td>
                    <!-- Modal -->
                    <div class="modal fade" id="mymodal{{my_var}}" tabindex="-1" data-replace="true" role="dialog"
                         aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="vertical-alignment-helper">
                            <div class="modal-dialog vertical-align-center">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">Object Content</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>{{v}}</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            Close
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% endifnotequal%}
                    {% endfor %}
                </tr>
                {% endwith %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>