最近在弄bootstrap做前端html5页面,其中有用到表格。
表格中有一列数据是按钮增删数据的操作,需要弹出bootstrap的模态框用来操作。
操作的逻辑是向服务端传递id值,所以就需要去获取该行数据id一列的值。
所以就有这个问题,就是再弹出模态框后,获取点击弹出模态框按钮所在的数据。
可以看下table,需要通过点击操作栏,获取到序号列传给服务器操作。
模态框代码
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModalRefuse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h5 class="modal-title" id="myModalLabel">拒绝申请</h5>
</div>
<div class="modal-body">
请输入拒绝申请的原因<span style="color:red">*</span><br>
<textarea name="refuseTextareaContext" rows="10" cols="30"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" id="btnRefuseSave" class="btn btn-primary" data-dismiss="modal">
保存
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
table tbody是在js中写的,就不贴了。
主要看js中的操作:
$('#myModalRefuse').on('show.bs.modal', function (event) {
$("textarea[name = refuseTextareaContext]").innerHTML = "";
var btnThis = $(event.relatedTarget); //触发事件的按钮
var modal = $(this); //当前模态框
var modalId = btnThis.data('id'); //解析出data-id的内容
currentDataId = btnThis.closest('tr').find('td').eq(1).text();//获取某一列的内容eq后面表示列数
///alert("show.bs.modal modalId = " + modalId + ", currentDataId = " + currentDataId);
});
myModalRefuse表示模态框的id,on是模态框将要显示前的监听事件。
var btnThis = $(event.relatedTarget);这一行就是获取点击出现这个模态框的那个按钮。
btnThis.closest(‘tr’).find(‘td’).eq(1).text(); 获取按钮所在行tr再去找列td,eq表示是第几列,然后获取到text内容。
这样就接触了这个问题了。