table中点击按钮弹出模态框，获取table中点击的按钮所在行的数据

最新推荐文章于 2022-12-23 10:23:38 发布

原创最新推荐文章于 2022-12-23 10:23:38 发布 · 8.1k 阅读

16 ·

CC 4.0 BY-SA版权

前端学学专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在使用Bootstrap制作的HTML5页面中，通过模态框进行数据操作。重点讲解了如何在模态框打开时，从表格中获取特定行的数据ID，以便向服务器传递参数。

最近在弄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内容。
这样就接触了这个问题了。