我有一个像这样的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 页面中。我认为我可以在服务器端通过表单使用控制器。
如何在按下某一行的详情按钮时显示详情弹窗?
另一种变体是使用 jQuery。只要用户单击按钮,就会从服务器读取信息。
http://api.jquery.com/jquery.ajax/
为此投入时间并制作更好、更快且数据低调的应用程序。 但如果你不能使用,Farhan 有很好的解决方案。
假设它适用于 UI 上的所有表格:
<script>
var cells=document.getElementsbyTagName("td");
for(i=0;i<cells.length;i++){
cells[i].onclick=function(){alert(this.innerHTML);};
}
</script>
保持HTML表格结构正常。不需要在那里调用任何函数。
$(document).ready(function(){
$(".detail_button").on("click",function(){
var parentTr = $(this).closest("tr");
var counter = 1;
$("td", $(parentTr)).each(function(){
if(!($(this).hasClass("detail_td"))){
$(".modal-body tr td:nth-child("+counter+")").text($(this).text());
counter++;
}
$(".modal-body").show();
$("#bodytable").hide();
});
});
$("#hide_popup").on("click",function(){
$(".modal-body").hide();
$("#bodytable").show();
});
});
.modal-body{
display:none;
position:absolute;
top:0;
left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="modal-body">
<input type="button" id="hide_popup" value="Hide Popup"/>
<div style="clear"></div>
<table id="mytable" class="table table-bordred table-striped" border="1">
<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></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<table id="bodytable" class="table table-bordred table-striped" border="1">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
<th>Detail</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
</tbody>
</table>
根据我的理解,您希望在单击详细信息按钮时在弹出窗口中显示相关行数据。如果不是请纠正我 HTML
<div class="modal-body">
<input type="button" id="hide_popup" value="Hide Popup"/>
<div style="clear"></div>
<table id="mytable" class="table table-bordred table-striped" border="1">
<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></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<table id="bodytable" class="table table-bordred table-striped" border="1">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
<th>Detail</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
</tbody>
</table>
JQUERY
$(document).ready(function(){
$(".detail_button").on("click",function(){
var parentTr = $(this).closest("tr");
var counter = 1;
$("td", $(parentTr)).each(function(){
if(!($(this).hasClass("detail_td"))){
$(".modal-body tr td:nth-child("+counter+")").text($(this).text());
counter++;
}
$(".modal-body").show();
$("#bodytable").hide();
});
});
$("#hide_popup").on("click",function(){
$(".modal-body").hide();
$("#bodytable").show();
});
});
CSS
.modal-body{
display:none;
position:absolute;
top:0;
left:0px;
}