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

Question

我很擅长编程，并且已经在某个问题上被阻止了几天。我有一个有 2 列的表，记录# 和每条记录的注释。 “笔记”通常很长，所以我计划在“笔记”列的每个单元格上都有一个链接，并链接到显示笔记的模式。我面临的问题是所有链接都将显示表格第一项的注释...

这是我的代码（td "Notes" 仅用于验证目的）：

 <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>

我真的很感激任何帮助！快把我逼疯了！！！

Answer 1

这一点：

<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>