表格内容后有一个修改按钮，当点击该按钮时，BootStrap摸态框获取表格该行的内容做显示

摸态框触发按钮：

表格行：

<td>xxx</td>

<td>xxx</td>

<td colspan="1" class="valueId"><button class="updateBtn btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">修改</button></td>

触发模态弹出窗元素data-target，对应下面弹窗的id

摸态框代码：

<form method="post" action="xxx" class="form-horizontal" role="form" id="form_addData" style="margin: 20px;">
    <div class="modal fade" id="myModal" 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">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        摸态框标题
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="aa" class="col-sm-3 control-label">内容1</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="aa" name="aa"  disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bb" class="col-sm-3 control-label">内容2</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="bb" name="bb"  disabled="disabled" value="">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                            保存修改
                    </button><span id="tip"> </span>
                </div>
            </div>
        </div>
    </div>
    </form>

js控制代码：

<script>
$('#myModal').on('show.bs.modal', function (event) {
    $("textarea[name = refuseTextareaContext]").innerHTML = "";
    var btnThis = $(event.relatedTarget);//触发事件的按钮
    var modal = $(this);//当前模态框
    var modalId = btnThis.data('id');//解析出data-id的内容
    aa= btnThis.closest('tr').find('td').eq(0).text();//获取某一列的内容eq后面表示列数
    bb= btnThis.closest('tr').find('td').eq(1).text();
    $("#aa").val(aa);
    $("#bb").val(bb);
});
</script>

演示：（仅为demo演示，与上面demo代码不完全对应）

 

来源：oschina

链接：https://my.oschina.net/dreamerliujack/blog/4279358