<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" width="100" src="http://cfisinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div>
</td>
<td>
<div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div>
</td>
<td>
<p>
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
<td>
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</c:forEach>
</table>
和弹出窗口的代码
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div>le numero de l'article</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
这是我的问题的解决方案
表格代码：
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td><div class="media">
<a class="pull-left" href="#"> <img
class="media-object img-thumbnail" width="100"
src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg"
alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div></td>
<td><div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div></td>
<td><p>
<button class="btn btn-primary btn-xs" data-title="Edit"
data-toggle="modal" data-target="#edit" data-placement="top"
rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p></td>
<td>
<button class="open-deleteDialog btn btn-danger btn-xs"
data-title="Delete" data-toggle="modal"
data-target="#delete-article" data-placement="top"
data-id="ISBN564541" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</c:forEach>
</table>
<button class="btn btn-primary btn-xs" data-toggle="modal"
data-target="#ajoutart" data-placement="top" rel="tooltip">
<span>Ajouter Article</span>
</button>
</div>
</div>
</div>
</div>
模态类代码：
<div class="modal fade" id="delete-article" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="id" id="id" value="" />
</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
和javascript函数：
<script type="text/javascript">
$(document).on("click", ".open-deleteDialog", function() {
var ida = $(this).data('id');
$(".modal-body #id").val(ida);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
$('#delete').modal('show');
});