How can I click on a table cell and display a modal with notes

问题

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

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

回答1:

This bit:

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

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

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

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

and of course for the link too:

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

来源：https://stackoverflow.com/questions/21461440/how-can-i-click-on-a-table-cell-and-display-a-modal-with-notes