javascript - 显示一个弹出窗口，其中包含 html 表格中每一行的详细信息

Question

我有一个像这样的 html 表格:

<table id="mytable" class="table table-striped">
<tbody>
    <c:forEach items="${listeCollabDeRrh}" var="collab">
        <tr>
            <td>${collab.matricule }</td>
            <td>${collab.nom }</td>
            <td>${collab.prenom}</td>
            <td hidden="true">${collab.bu.getNomBU()}</td>
            <td hidden="true">${collab.contact}</td>
            <td hidden="true">${collab.dateEmbauche}</td>
            <td>
                <p data-placement="top" data-toggle="tooltip" title="Details">
                    <button class="btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details">	<span class="glyphicon glyphicon-text-color"></span>
                    </button>
                </p>
            </td>
        </tr>
    </c:forEach>
</tbody>
</table>

如果我单击详细信息按钮，我将弹出一个包含行的所有详细信息的弹出窗口:

<div class="modal-body">
<table id="mytable" class="table table-bordred table-striped">
    <thead>
        <th>Matricule</th>
        <th>Nom</th>
        <th>Pronom</th>
        <th>BU</th>
        <th>Contact</th>
        <th>Date d'ambauche</th>
        <th>RRH</th>
    </thead>
    <tbody>
        <tr>
            <td>matricule of collab</td>
            <td>nom of collab</td>
            <td>prenom of collab</td>
            <td>bu of collab</td>
            <td>contact of collab</td>
            <td>dateEmbauche of collab</td>
        </tr>
    </tbody>
</table>

问题在于 HTML 表格和详细信息弹出窗口位于同一个 jsp 页面中。我认为我可以在服务器端通过表单使用 Controller 。

如何在按下某一行的详细信息按钮时显示详细信息弹出窗口？

Answer 1

另一种变体是使用 jQuery。只要用户单击按钮，就会从服务器读取信息。

http://api.jquery.com/jquery.ajax/

为此投入时间并制作更好、更快且数据低调的应用程序。 但如果你不能使用，Farhan 有很好的解决方案。