table中点击按钮弹出模态框,获取table中点击的按钮所在⾏的数据
最近在弄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">
textarea中cols表示<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 >*</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('dal',function(event){
$("textarea[name = refuseTextareaContext]").innerHTML ="";
var btnThis =$(latedTarget);//触发事件的按钮
var modal =$(this);//当前模态框
var modalId = btnThis.data('id');//解析出data-id的内容
currentDataId = btnThis.closest('tr').find('td').eq(1).text();//获取某⼀列的内容eq后⾯表⽰列数
///alert("dal modalId = " + modalId + ", currentDataId = " + currentDataId);
});
myModalRefuse表⽰模态框的id,on是模态框将要显⽰前的监听事件。
var btnThis = $(latedTarget);这⼀⾏就是获取点击出现这个模态框的那个按钮。
btnThis.closest(‘tr’).find(‘td’).eq(1).text(); 获取按钮所在⾏tr再去列td,eq表⽰是第⼏列,然后获取到text内容。这样就接触了这个问题了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论