如何单击表格单元格并显示带有注释的模式

我对编程相当感兴趣，并且已经在一个问题上被阻止了几天。我有一个包含 2 列的表，记录# 和每条记录的注释。 “注释”通常很长，因此我计划在“注释”列上的每个单元格上建立一个链接，并链接到显示注释的模式。我面临的问题是所有链接都会显示表格第一项的注释......

这是我的代码（td“注释”只是用于验证目的）：

 <table>
    <tbody>
        @foreach (DataRow row in Model.Rows)
        {        
            <tr>
                <td>@row["Record#"]</td>
                <td>@row["Notes"]</td>
                <td>
                    <a data-toggle="modal" data-target="#notes">View Notes</a>

                    <!--.modal -->
                    <div id="notes" class="modal fade modal-scroll" tabindex="-1" data-replace="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <div class="scroller" style="height:100px" data-always-visible="1" data-rail-visible1="1">
                                        @row["Notes"]
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal -->
                </td>
            </tr>
        }
    </tbody>
</table>

我真的很感激任何帮助！这让我发疯！

这一点：

<div id="notes" class="modal fade modal-scroll" tabindex="-1" data-replace="true">

在 - 的里面@foreach，正在创建多个具有相同 id 的 div，并且这是无效的 HTML，因此您不应该这样做（并且 javascript 不理解，因此该行为不可靠，一种结果可能是您遇到的结果，但结果可能会有所不同）。

尝试给他们不同的ID，也许使用记录号？

<div id="notes-@(row["Record#"])" class=... 

当然还有链接：

<a data-toggle="modal" data-target="#notes-@(row["Record#"])">View Notes</a>