如何单击表格单元格并显示带有注释的模态 [英] How can I click on a table cell and display a modal with notes

问题描述

我相当愿意编程，并且已经在某个问题上被封锁了几天.我有一个包含2列的表，每个记录都有Record#和注释.注释"通常很长，因此我打算在注释"列的每个单元格上都有一个链接，该链接带有一个显示注释的模态的链接.我面临的问题是所有链接都将显示表格第一项的注释...

I am fairly to programmming, and have been blocked on an issue for a few days now. I have a table with 2 columns, Record# and notes for each record. The "notes" are usually very long so I was planning on having a link on each cell on the "notes" column with a link to a modal where the notes where displayed. Problem I am facing is that all the links will show the notes for the first item of the table...

这是我的代码(td"Notes"仅在此处用于验证):

Here is my code (the td "Notes" is just there for verification purposes):

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

对此我将不胜感激！它让我发疯了！！！

I would really appreciate any help with this! It is driving me insane!!!

推荐答案

此位:

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

在 @foreach 内的

正在创建具有相同ID的多个div，并且该HTML是无效的HTML，因此您不应该这样做(并且javascript无法理解，因此行为不可靠，可能会导致后果之一)成为您遇到的人，但结果可能会有所不同).

inside the @foreach, is creating multiple div with the same id and that is invalid HTML so it's something you should not do (and javascript does not understand so the behaviour is unreliable, one consequence could be the one you experience but the results may vary).

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

Try to give them different id, maybe using the record number?

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

当然还有链接:

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

这篇关于如何单击表格单元格并显示带有注释的模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！