一个模态窗口实例

例一:

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<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">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

例二：

<link rel="stylesheet" href="{{ \Illuminate\Support\Facades\URL::asset('common/pat/common.css') }}">
<div class="modal fade text-center" id="PacksModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" style="width: 80%"  id="show_media">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    <div class="order_total_header" style="text-align: left;float: left;font-size: 1.8rem;">订单总数：<span style="color: #1ab7ea"></span></div>
                    大烫策划(<span class="tital_name"></span>)
                </h4>
            </div>
            <form method="post" id="PacksFrom" accept-charset="UTF-8" class="form-horizontal" pjax-container>
                <div class="modal-body">
                    <div style="overflow:auto;min-height: 260px;">
                        <table class="table table-responsive table-striped no-padding">
                            <thead>
                                <tr class="batch_no_title">
                                    <td class="td_parent"><div style="width: 8rem;">批次</div></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="batch_date_title">
                                    <td class="td_parent">日期</td>
                                </tr>
                                <tr class="iow_sum_title">
                                    <td class="td_parent">查货</td>
                                </tr>
                                <tr class="plan_num_title">
                                    <td class="td_parent">计划下货</td>
                                </tr>
                                <tr class="actual_sum_title">
                                    <td class="td_parent">实际下货</td>
                                </tr>
                                <tr class="packs_plan_title">
                                    <td class="td_parent">计划大烫</td>
                                </tr>
                                <tr class="packs_actual_title">
                                    <td class="td_parent">实际大烫</td>
                                </tr>
                                <tr class="plan_surplus_title">
                                    <td class="td_parent">计划剩余</td>
                                </tr>
                                <tr class="success_rate_title">
                                    <td class="td_parent">完成率</td>
                                </tr>
                                <tr class="order_rate_title">
                                    <td class="td_parent">订单比例</td>
                                </tr>
                                <tr class="remarks_title">
                                    <td class="td_parent">备注</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default add_days" onclick="add_days()">新增天数</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary sub">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div>
</div>
<template class="filter-tpl">
    <div class="col-md-12" style="width: 600px" id="filter-box">
        <form action="/admin/patfabric/ironing" class="form-horizontal" pjax-container method="get">
            <div class="fields-group">
                <div class="col-md-8">
                    <label class="col-sm-3 control-label">搜索</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="搜索内容" name="search" autocomplete="off" value="{{ \request()->search }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="btn-group pull-left">
                        <button class="btn btn-info submit"><i class="fa fa-search"></i>&nbsp;&nbsp;搜索</button>
                    </div>
                    <div class="btn-group pull-left " style="margin-left: 10px;">
                        <a href="/admin/patfabric/ironing" class="btn btn-default"><i class="fa fa-undo"></i>&nbsp;&nbsp;重置</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

<template class="th-tpl">
    <th class='td_parent___KEY__'><div style='width: 7rem;margin: 0 auto'><span class="str"></span><input type='hidden' name='batch_no[]' value=''></div></th>;
</template>
<template class="td-tpl">
    <td class='td_parent___KEY__'><span class="str"></span><input type='__INPUT_TYPE__' name='__INPUT_NAME__[]' value=''></td>
</template>
<template class="td-input-tpl">
    <td class='td_parent___KEY__'><input type='text' name='__INPUT_NAME__[]' style="text-align: center;width: 8.3rem"
                                         onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")'
                                         onblur='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")'
                                         onchange='planPackeSyQty(this,"__INPUT_CLINT_OBJ__")' value='0' title="只能输入正整数" placeholder="大烫计划"></td>
</template>
<template class="td-input-remarks-tpl">
    <td class='td_parent___KEY__'><textarea name="__INPUT_NAME__[]" rows="3" style="text-align: center;width: 8.3rem" placeholder="备注" ></textarea></td>
</template>
<template class="td-remarks-tpl">
    <td class='td_parent___KEY__'><textarea name="__INPUT_NAME__[]" rows="3" style="text-align: center;width: 8.3rem;border: 0;" ></textarea></td>
</template>

<template class="init_th_tpl">
    <th class='td_parent'><div style='width: 10rem'></div></th>;
</template>


<script>
    // 定义选择的id
    var relatio_id = '';
    var filterTpl =  $('template.filter-tpl');
    var tableThTpl =  $('template.th-tpl');
    var tableTdTpl =  $('template.td-tpl');
    var tableTdInputTpl =  $('template.td-input-tpl');
    var tableTdInputRemarksTpl =  $('template.td-input-remarks-tpl');
    var tableTdRemarksTpl =  $('template.td-remarks-tpl');

    var InitTableTpl =  $('template.init_th_tpl');
    var index = 1;
    var order_qty = 0;     // 订单数量
    var i_order_qty = 0;   // 剩余订单数量
    var max_batch = 0;      // 当前最大批次号
    var arr = [];           // 数据
    // 展示弹框的表格修改

    $(function(){
        var filterTplHtml = filterTpl.html();
        $('.box-header').prepend(filterTplHtml)
        // 点击选择 按钮
        window.show_track = function(id,type)
        {
            clearTable();
            index = 1;
            $('.show_view').empty();
            types = type;
            relatio_id = id;
            if(types == 1){
                $('.packs_actual_title').hide();
                $('.tital_name').html('计划');
                $(".sub").removeAttr("disabled");
            }else if(types == 2){
                $('.packs_actual_title').show();
                $('.tital_name').html('实际');
                $(".sub").removeAttr("disabled");
            }
            else{
                $('.packs_actual_title').show();
                $('.tital_name').html('实际');
                $(".sub").attr("disabled","disabled");
                $(".add_days").attr("disabled","disabled");
            }
            // 获取这条信息下的计划和实际信息
            $.ajax({
                url: "/admin/patfabric/getPacksInfo",
                type: "get",
                data:{
                    '_token':LA.token,
                    'relatio_id':relatio_id,
                    'type':types,
                    'flag': 2,
                },
                dataType:'json',
                success: function (res) {
                    if (res.status == 100) {
                        arr = res.data;
                        max_batch = res.max_batch;
                        $('.order_total_header span').html(res.order_sum)
                        if(types == 1){
                            $('.packs_actual_title').hide();
                            $('.success_rate_title').hide();
                            i_order_qty = order_qty = res.order_sum;

                        }else{
                            $('.packs_actual_title').show();
                            $('.success_rate_title').show();
                            i_order_qty = order_qty = res.order_sum;
                        }

                        var grand_total = 0;
                        for (var n in arr['batch_no']) {
                            var batch_no = arr['batch_no'][n];
                            if(n < max_batch){
                                //  批号
                                InitColmTdDom(1,batch_no,'.batch_no_title',arr['batch_str'][n],arr['batch_no'][n],'');
                                //  日期
                                InitColmTdDom(2,batch_no,'.batch_date_title',arr['batch_date'][n],arr['batch_date'][n],'hidden','batch_date');
                                //  查获期数量
                                InitColmTdDom(2,batch_no,'.iow_sum_title',arr['iow_date'][n],arr['iow_date'][n],'hidden','iow_date');
                                //  计划下货
                                InitColmTdDom(2,batch_no,'.plan_num_title',arr['plan_sum'][n],arr['plan_sum'][n],'hidden','plan_sum');
                                //  实际下货
                                InitColmTdDom(2,batch_no,'.actual_sum_title',arr['actual_sum'][n],arr['actual_sum'][n],'hidden','actual_sum');
                                // 计划包装
                                var list_order_rate = 0;

                                if (types == 1){
                                    if(n <= max_batch){
                                        grand_total += arr['packs_plan'][n];
                                        InitColmTdDom(3,batch_no,'.packs_plan_title',arr['packs_plan'][n],arr['packs_plan'][n],'.packs_plan_title','packs_plan');
                                        list_order_rate = grand_total/order_qty*100;
                                    }else{
                                        InitColmTdDom(4,batch_no,'.packs_plan_title');
                                    }
                                    i_order_qty -= arr['packs_plan'][n]
                                } else if(types == 2){
                                    // 计划包装
                                    InitColmTdDom(2,batch_no,'.packs_plan_title',arr['packs_plan'][n],arr['packs_plan'][n],'hidden','packs_plan');
                                    if(n <= max_batch){
                                        // 实际包装
                                        InitColmTdDom(3,batch_no,'.packs_actual_title',arr['packs_actual'][n],arr['packs_actual'][n],'.packs_actual_title','packs_actual');
                                        grand_total += arr['packs_actual'][n];
                                        var success_rate = arr['packs_actual'][n]/arr['packs_plan'][n]*100;
                                        if( success_rate > 100){
                                            success_rate = 100;
                                        }
                                        list_order_rate = grand_total/order_qty*100;
                                        InitColmTdDom(5,batch_no,'.success_rate_title',success_rate.toFixed(0));
                                    }else{
                                        InitColmTdDom(4,batch_no,'.packs_actual_title');
                                        InitColmTdDom(4,batch_no,'.success_rate_title');
                                    }
                                    i_order_qty -= arr['packs_actual'][n]
                                }
                                else {
                                    //详情
                                    InitColmTdDom(2,batch_no,'.packs_plan_title',arr['packs_plan'][n],arr['packs_plan'][n],'hidden','packs_plan');
                                    InitColmTdDom(2,batch_no,'.packs_actual_title',arr['packs_actual'][n],arr['packs_actual'][n],'hidden','packs_actual');
                                    grand_total += arr['packs_actual'][n];
                                    var success_rate = 0;
                                    if (arr['packs_plan'][n] != 0){
                                         success_rate = arr['packs_actual'][n]/arr['packs_plan'][n]*100;
                                    }
                                    if( success_rate > 100){
                                        success_rate = 100;
                                    }
                                    list_order_rate = grand_total/order_qty*100;
                                    InitColmTdDom(5,batch_no,'.success_rate_title',success_rate.toFixed(0));
                                }
                                InitColmTdDom(5,batch_no,'.order_rate_title',list_order_rate.toFixed(0),list_order_rate.toFixed(0));
                                //  计划剩余
                                $('.plan_surplus_title').append("<td class='td_parent_"+batch_no+"'>"+i_order_qty+"</td>")
                                if(types == 1){
                                    $('.plan_surplus_title').closest('tr').css('background-color', '#fff');
                                }
                                else{
                                    $('.plan_surplus_title').closest('tr').removeAttr('style');
                                }
                                //备注
                                if (types == 1){
                                    if(n <= max_batch){
                                        InitColmTdDom(10,batch_no,'.remarks_title'  ,arr['remarks_plan'][n]  ,arr['remarks_plan'][n]  ,'.remarks_title','remarks');
                                    }
                                    else{
                                        InitColmTdDom(4,batch_no,'.remarks_title');
                                    }
                                }
                                else if(types == 2){
                                    if(n <= max_batch) {
                                        InitColmTdDom(10, batch_no, '.remarks_title', arr['remarks_actual'][n], arr['remarks_actual'][n], '.remarks_title', 'remarks');
                                    }
                                    else{
                                        InitColmTdDom(4,batch_no,'.remarks_title');
                                    }
                                }
                                else {
                                    //备注详情
                                    if(n <= max_batch) {
                                        InitColmTdDom(11, batch_no, '.remarks_title', arr['remarks_actual'][n], arr['remarks_actual'][n], '.remarks_title', 'remarks');
                                    }
                                    else{
                                        InitColmTdDom(4,batch_no,'.remarks_title');
                                    }
                                }
                            }else{
                                $('.batch_no_title').append("<th class='td_parent'><span class='batch_th_10'>-</span></th>")
                                //  日期
                                $('.batch_date_title').append("<td class='td_parent'>"+arr['batch_date'][n]+"</td>")
                                $('.iow_sum_title').append("<td class='td_parent'>"+arr['iow_date'][n]+"</td>")
                                $('.plan_num_title').append("<td class='td_parent'></td>")
                                $('.actual_sum_title').append("<td class='td_parent'></td>")
                                $('.packs_plan_title').append("<td class='td_parent'></td>")
                                $('.plan_surplus_title').append("<td class='td_parent'></td>")
                                $('.success_rate_title').append("<td class='td_parent'></td>")
                                $('.order_rate_title').append("<td class='td_parent'></td>")
                                $('.remarks_title').append("<td class='td_parent'></td>")
                            }
                        }
                    }else{
                        sweetAlert(res.message);
                    }
                }
            });
        }
        // 初始化 新增自定义列
        function InitColmTdDom(type,batch_no=null,obj=null,str=null,val=null,inputType=null,inputName=null){
            var tableThTplHtml = '';
            if(type == 4){
                $(obj).append('<td></td>')
            }else if(type == 5){
                $(obj).append("<td class='td_parent_"+batch_no+"'>"+str+"%</td>")
            } else{
                if(type == 1){
                    tableThTplHtml = tableThTpl.html().replace(/__KEY__/g, batch_no);
                }else if(type == 2){
                    tableThTplHtml = tableTdTpl.html().replace(/__KEY__/g, batch_no).replace(/__INPUT_NAME__/g, inputName).replace(/__INPUT_TYPE__/g,inputType)
                }else if(type == 3){
                    tableThTplHtml = tableTdInputTpl.html().replace(/__KEY__/g, batch_no).replace(/__INPUT_NAME__/g, inputName).replace(/__INPUT_CLINT_OBJ__/g, inputType);
                }
                else if(type == 10){
                    tableThTplHtml = tableTdInputRemarksTpl.html().replace(/__KEY__/g, batch_no).replace(/__INPUT_NAME__/g, inputName).replace(/__INPUT_CLINT_OBJ__/g, inputType);
                }
                else if(type == 11){
                    tableThTplHtml = tableTdRemarksTpl.html().replace(/__KEY__/g, batch_no).replace(/__INPUT_NAME__/g, inputName).replace(/__INPUT_CLINT_OBJ__/g, inputType);
                }
                $(obj).append(tableThTplHtml);
                var batch_no_d = $(obj+' .td_parent_'+batch_no);
                if(type != 3){
                    batch_no_d.find('.str').html(str);
                }
                if(type == 10 || type == 11){
                    batch_no_d.find('textarea').val(val);
                    if (val  != ''){
                        batch_no_d.find('textarea').attr('readonly','readonly');
                    }
                }
                else {
                    batch_no_d.find('input').val(val);
                }
                if(type == 3){
                    if (val  >= 0 && val  != ''){
                        batch_no_d.find('input').attr('readonly:','readonly');//.attr('background-color','aliceblue')
                    }
                }
            }
        }
        // 初始化表格
        function clearTable(){
            ClearColmHead('.batch_no_title','批次');
            ClearColmHead('.batch_date_title','日期');
            ClearColmHead('.iow_sum_title','查货期');
            ClearColmHead('.plan_num_title','计划下货');
            ClearColmHead('.actual_sum_title','实际下货');
            ClearColmHead('.packs_plan_title','计划大烫');
            ClearColmHead('.packs_actual_title','实际大烫');
            ClearColmHead('.plan_surplus_title','计划剩余');
            ClearColmHead('.success_rate_title','完成率');
            ClearColmHead('.order_rate_title','订单比例');
            ClearColmHead('.remarks_title','备注');
        }
        // 初始化 重置第一列
        function ClearColmHead(obj,str){
            $(obj).empty();
            $(obj).append(InitTableTpl.html())
            $(obj).find('div').html(str)
        }
        // 提交
        $(".sub").click(function(){
            swal({
                title: "提交数据以后无法修改,确认提交?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#FF0000",
                confirmButtonText: "确认",
                showLoaderOnConfirm: true,
                cancelButtonText: "取消",
                preConfirm: function() {
                    return new Promise(function(resolve) {
                        $(".sub").attr("disabled",true);
                        var postData = $('#PacksFrom').serializeArray()
                        $.ajax({
                            url: "/admin/patfabric/packPost",
                            type: "post",
                            data:{
                                '_token':LA.token,
                                'relatio_id':relatio_id,
                                'type':types,
                                'flag': 2,
                                'data':postData
                            },
                            dataType:'json',
                            success: function (res) {
                                $("#myModal1").modal('hide');
                                $(".sub").attr("disabled",false)
                                if (res.status == 100) {
                                    sweetAlert(res.message);
                                    setTimeout(function () {
                                        location.reload();
                                    },1500)
                                }else{
                                    sweetAlert(res.message);
                                }
                            }
                        });
                    });
                }
            })
        })
        // 完成
        $('.grid-row-success').unbind('click').click(function() {
            var id = $(this).data('id');
            swal({
                title: "确认完成后,数据将不可再修改?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确认",
                showLoaderOnConfirm: true,
                cancelButtonText: "取消",
                preConfirm: function() {
                    return new Promise(function(resolve) {
                        $.ajax({
                            method: 'post',
                            url: '/admin/patfabric/checksuccess',
                            data: {
                                id:id,
                                type:3,
                                _token:LA.token,
                            },
                            success: function (data) {
                                $.pjax.reload('#pjax-container');
                                resolve(data);
                            }
                        });
                    });
                }
            }).then(function(result) {
                var data = result.value;
                if (typeof data === 'object') {
                    if (data.status) {
                        swal(data.message, '', 'success');
                    } else {
                        swal(data.message, '', 'error');
                    }
                }
            });
        });
        window.getTime = function(time)
        {
            var date = new Date(time);
            var times = parseInt(date.getTime() / 1000);
            return times;
        }
    })
    // 计划剩余数量
    function planPackeSyQty(e,cls){
        i_order_qty = order_qty
        var grand_total = 0;
        $(cls).children('td').each(function (f,obj) {
            var objClass = $(obj).attr('class');
            if(f <= max_batch){
                var plan_num = parseInt($(obj).find('input').val());
                if (Object.is(plan_num,NaN) ){
                    plan_num = 0;
                }
                i_order_qty -= plan_num;
                grand_total += plan_num;
                if(i_order_qty<0){
                    var thisVal = (parseInt(plan_num)+parseInt(i_order_qty));
                    $(obj).children('input').val(thisVal)
                    i_order_qty = 0;
                }
                if(types == 2){
                    var com_packs_plan = $('.packs_plan_title').children('.'+objClass).find('input').val()
                    var success_rate = ((parseInt(plan_num)/parseInt(com_packs_plan))*100).toFixed(0);
                    if(success_rate>100){
                        success_rate = 100;
                    }
                    $('.success_rate_title').children('.'+objClass).html(success_rate+'%')
                }
                $('.plan_surplus_title').find('.td_parent_'+(f+1)).html(i_order_qty)
                list_order_rate = isNaN(grand_total/order_qty*100)?0:grand_total/order_qty*100;
                $('.order_rate_title').find('.td_parent_'+(f+1)).html(list_order_rate.toFixed(0)+'%')
            }
        });
    }
    // 新增天数
    function add_days(){
        if(i_order_qty <= 0){
            swal('剩余可分配数量不足');
            return false;
        }
        batch_no = max_batch;
        var postData = $('#PacksFrom').serializeArray()
        $.ajax({
            url: "/admin/patfabric/getDays",
            type: "get",
            data:{
                '_token':LA.token,
                // 'relatio_id':relatio_id,
                // 'type':types,
                // 'batch_no': batch_no,
                // 'flag': 2,
                'data':postData,
            },
            dataType:'json',
            success: function (res) {
                if (res.code == 100) {
                    max_batch++;
                    //  批号
                    var tableThTplHtml = tableThTpl.html().replace(/__KEY__/g, max_batch);
                    $('.batch_no_title').find('.td_parent_'+batch_no).after(tableThTplHtml)
                    var batch_no_d = $('.batch_no_title .td_parent_'+max_batch);
                    batch_no_d.find('.str').html('第'+max_batch+'天');
                    batch_no_d.find('input').val(max_batch);

                    var tdHtml = tableTdTpl.html().replace(/__KEY__/g, max_batch).replace(/__INPUT_TYPE__/g, 'text')
                    //  日期
                    var tableTdTplHtml = tdHtml.replace(/__INPUT_NAME__/g, 'batch_date');
                    $('.batch_date_title').find('.td_parent_'+batch_no).after(tableTdTplHtml)
                    var batch_date_d = $('.batch_date_title .td_parent_'+max_batch);
                    // batch_date_d.find('input').datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN","allowInputToggle":true,'minDate': new Date()});
                    batch_date_d.find('input').datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN","allowInputToggle":true,'minDate': new Date(res.data)});

                    $('.iow_sum_title').find('.td_parent_'+batch_no).after("<td class='td_parent_"+max_batch+"'></td>")
                    $('.plan_num_title').find('.td_parent_'+batch_no).after("<td class='td_parent_"+max_batch+"'></td>")
                    $('.actual_sum_title').find('.td_parent_'+batch_no).after("<td class='td_parent_"+max_batch+"'></td>")
                    if(types == 1){
                        // 计划包装
                        var tdHtml = tableTdInputTpl.html().replace(/__KEY__/g, max_batch).replace(/__INPUT_NAME__/g, 'packs_plan').replace(/__INPUT_CLINT_OBJ__/g, '.packs_plan_title');
                        $('.packs_plan_title').find('.td_parent_'+batch_no).after(tdHtml)
                    }else{
                        var tdHtml = tableTdInputTpl.html().replace(/__KEY__/g, max_batch).replace(/__INPUT_NAME__/g, 'packs_actual').replace(/__INPUT_CLINT_OBJ__/g, '.packs_actual_title');
                        $('.packs_actual_title').find('.td_parent_'+batch_no).after(tdHtml)

                        $('.packs_plan_title').find('.td_parent_'+batch_no).after("<td class='td_parent_"+max_batch+"'>-<input type='hidden' value='0'>0</td>")
                        $('.success_rate_title').find('.td_parent_'+batch_no).after("<td class='td_parent_"+max_batch+"'></td>")
                    }

                    $('.plan_surplus_title').find('.td_parent_'+batch_no).after("<td class='td_parent_"+max_batch+"'>"+i_order_qty+"</td>")
                    //备注
                    if(types == 1) {
                        var tdHtml = tableTdInputRemarksTpl.html().replace(/__KEY__/g, max_batch).replace(/__INPUT_NAME__/g, 'remarks').replace(/__INPUT_CLINT_OBJ__/g, '.remarks_title');
                        $('.remarks_title').find('.td_parent_' + batch_no).after(tdHtml)
                    }
                    else if(types == 2) {
                        var tdHtml = tableTdInputRemarksTpl.html().replace(/__KEY__/g, max_batch).replace(/__INPUT_NAME__/g, 'remarks').replace(/__INPUT_CLINT_OBJ__/g, '.remarks_title');
                        $('.remarks_title').find('.td_parent_' + batch_no).after(tdHtml)
                    }
                    else{
                        var tdHtml = tableTdRemarksTpl.html().replace(/__KEY__/g, max_batch).replace(/__INPUT_NAME__/g, 'remarks').replace(/__INPUT_CLINT_OBJ__/g, '.remarks_title');
                        $('.remarks_title').find('.td_parent_' + batch_no).after(tdHtml)
                    }
                }else{
                    sweetAlert(res.msg);
                }
            }
        });
    }


</script>

例三：

<style type="text/css">
    .td_class{
        width:80px !important;
    }
    .td_class_modal{
        width:120px !important;
    }
    .td_parent{
        width:100px !important;
    }
    .none_input{
        border: none;
        outline: none;
        background: none;
    }
    .th_class{
        padding: 10px;
    }

</style>

<div class="content" style="min-height: 0px"> 
    <form action="/admin/patfabric/saveActData" method="post" accept-charset="UTF-8" class="form-horizontal" pjax-container>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">&nbsp;&nbsp;订单总数：<span style="color: #1ab7ea">{{ $data['order_sum'] }}</span></div>
                    <div class="panel-body myDiv">
                        <table class="table table-striped table-responsive no-padding show_days">
                            <th value="">日期</th>
                            <th value="">查货期</th>
                            <th value="">计划下货</th>
                            <th value="">实际下货</th>
                            @if ($data['flag'] == 1)
                                <th>计划大烫</th>
                                <th>实际大烫</th>
                            @endif
                            @if ($data['flag'] == 1)
                                <th>计划包装</th>
                                <th>实际包装</th>
                            @elseif ($data['flag'] == 2)
                                <th>计划大烫</th>
                                <th>实际大烫</th>
                            @elseif($data['flag'] == 3)
                                <th>计划锁定</th>
                                <th>实际锁定</th>
                            @endif
                            <th value="">计划剩余</th>
                            <th value="">完成率%</th>
                            <th value="">订单比例%</th>
                            <th value="">备注</th>
                            <th >操作</th>
                            <tr>
                                {{-- 日期--}}
                                <td class="td_class"><input type="text" id="batch_date" class="td_class none_input batch_date" style="min-width: 80px" name="batch_date"></td>
                                <script>
                                    $(function () {
                                        $('.batch_date').datetimepicker({
                                            "format": "YYYY-MM-DD",
                                            "locale": "zh-CN",
                                            "allowInputToggle": true,
                                            'minDate': new Date(),
                                            "calendarWeeks": true
                                        }).val("{{ $data['date'] }}");
                                        $('.batch_date').attr("disabled",true);
                                    })
                                </script>
                                {{-- 查货日期--}}
                                <td class="td_class">
                                    {!! isset($data)?$data['iow_date']:'' !!}
                                </td>
                                {{-- 计划下货--}}
                                <td class="td_class">
                                    {!! isset($data)?$data['plan_sum']:'' !!}
                                </td>
                                {{-- 实际下货--}}
                                <td class="td_class">
                                    {!! isset($data)?$data['actual_sum']:'' !!}
                                </td>
                                @if ($data['flag'] == 1)
                                    <td class="td_class packs_plan">
                                        {!! isset($data)?$data['iron_plan']:'' !!}
                                    </td>
                                    <td class="td_class packs_plan">
                                        {!! isset($data)?$data['iron_actual']:'' !!}
                                    </td>
                                @endif
                                {{-- 计划大烫、包装、锁定 --}}
                                <td class="td_class packs_plan">
                                    {!! isset($data)?$data['packs_plan']:'' !!}
                                </td>
                                <input type="hidden" name="packs_plan" class="packs_plan">
                                {{-- 实际大烫、包装、锁定--}}
                                <td class="td_class packs_actual" >
                                    @if($data['type'] == 1)
                                        <input class="td_class set_actual" type="text" name="actual_num" placeholder={{ $data['type_name'] }} required="1">
                                    @else
                                        {!! isset($data)?$data['packs_actual']:'' !!}
                                    @endif
                                </td>
                                <input type="hidden" name="plan_surplus" class="plan_surplus">
                                {{-- 计划剩余--}}
                                <td class="td_class plan_surplus">
                                    @if(isset($data))
                                        {{ $data['order_qty'] - $data['plan_qty']}}
                                    @endif
                                </td>
                                <input type="hidden" name="completion_per" class="completion_per">
                                {{-- 完成率 --}}
                                <td class="td_class completion_per">

                                </td>
                                <input type="hidden" name="done_per" class="done_per">
                                {{-- 订单比例 --}}
                                <td class="td_class done_per">

                                </td>

                                {{-- 备注--}}
                                <td class="td_class remark">
                                    <input type="text" name="remark" class="remark">
                                </td>

                                <td class="td_parent">
                                    <input type="hidden" name="_token" class="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="date" value="{{ $data['date'] }}">
                                    <input type="hidden" name="relation_id" value="{{$data['relation_id']}}">
                                    <input type="hidden" name="type" class="type" value="{{ $data['type'] }}">
                                    <input type="hidden" name="flag" class="flag" value="{{ $data['flag'] }}">
                                    <input type="hidden" name="max_batch" class="max_batch" value="{{ $data['max_batch'] }}">
                                    <input type="hidden" name="all_actual_num" class="all_actual_num"  value="{{ $data['actual_qty'] }}">
                                    <input type="submit" class="btn btn-default sub" style="margin-right: 8px" value="提交">
                                    <input type="button" class="btn btn-primary" onclick="history.back()" value="返回">
                                    {{-- <input type="button" class="btn btn-primary" onclick="javascript:history.go(-1)" value="返回">--}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
{{--        <div class="row" >--}}
{{--            <div class="col-sm-8">--}}
{{--                <a href="javascript:history.go(-1)" class="btn btn-primary">返回</a>--}}
{{--            </div>--}}
{{--        </div>--}}
    </form>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">{{ $data['type_name'] }}完成情况</div>
                <div class="panel-body">
                    <table class="table table-striped table-responsive no-padding table-hover">
                        <th>天数</th>
                        <th>日期</th>
                        <th>查货期</th>
                        <th>计划下货</th>
                        <th>实际下货</th>
                        @if ($data['flag'] == 1)
                            <th>计划大烫</th>
                            <th>实际大烫</th>
                        @endif
                        @if ($data['flag'] == 1)
                            <th>计划包装</th>
                            <th>实际包装</th>
                        @elseif ($data['flag'] == 2)
                            <th>计划大烫</th>
                            <th>实际大烫</th>
                        @elseif($data['flag'] == 3)
                            <th>计划锁定</th>
                            <th>实际锁定</th>
                        @endif
                        <th>累计完成</th>
                        <th>计划剩余</th>
                        <th>完成率</th>
                        <th>订单比例</th>
                        <th>备注</th>
                        <th>操作</th>
                        @foreach($list_data['batch_no'] as $k => $v)
                            <tr class="td_class" onmouseover="this.style.backgroundColor='#FFE9C8'" onmouseout="this.style.backgroundColor=''">
                                {{-- 天数 --}}
                                <td class="td_class">
                                    {!! isset($list_data['batch_str'])?$list_data['batch_str'][$k]:'' !!}
                                </td>
                                {{-- 日期--}}
                                <td class="td_class">
                                    {!! isset($list_data['batch_date'])?$list_data['batch_date'][$k]:'' !!}
                                </td>
                                {{-- 查货期--}}
                                <td class="td_class">
                                    {!! isset($list_data['iow_date'])?$list_data['iow_date'][$k]:'' !!}
                                </td>
                                {{-- 计划下货--}}
                                <td class="td_class">
                                    {!! isset($list_data['plan_sum'])?$list_data['plan_sum'][$k]:'' !!}
                                </td>
                                {{-- 实际下货--}}
                                <td class="td_class">
                                    {!! isset($list_data['actual_sum'])?$list_data['actual_sum'][$k]:'' !!}
                                </td>
                                {{-- 包装时加 计划/实际大烫 --}}
                                @if ($data['flag'] == 1)
                                    {{-- 包装时加 计划大烫 --}}
                                    <td class="td_class">
                                        {!! isset($list_data['iron_plan'])?$list_data['iron_plan'][$k]:'' !!}
                                    </td>
                                    {{-- 包装时加 实际大烫 --}}
                                    <td class="td_class">
                                        {!! isset($list_data['iron_actual'])?$list_data['iron_actual'][$k]:'' !!}
                                    </td>
                                @endif
                                {{-- 计划大烫、锁定、包装 --}}
                                <td class="td_class ">
                                    {!! isset($list_data['packs_plan'])?$list_data['packs_plan'][$k]:'' !!}
                                </td>
                                {{-- 实际大烫、锁定、包装--}}
                                <td class="td_class " >
                                    {!! isset($list_data['packs_actual'])?$list_data['packs_actual'][$k]:'' !!}
                                </td>
                                {{-- 累计完成--}}
                                <td class="td_class ">
                                    {!! isset($list_data['finish'])?$list_data['finish'][$k]:'' !!}
                                </td>
                                {{-- 计划剩余--}}
                                <td class="td_class ">
                                    {!! isset($list_data['surplus'])?$list_data['surplus'][$k]:'' !!}
                                </td>
                                {{-- 完成率 --}}
                                <td class="td_class ">
                                    {!! isset($list_data['success_rate'])?$list_data['success_rate'][$k]:'' !!}
                                </td>
                                {{-- 订单比例 --}}
                                <td class="td_class ">
                                    {!! isset($list_data['order_rate'])?$list_data['order_rate'][$k]:'' !!}
                                </td>
                                {{-- 备注--}}
                                <td class="td_class ">
                                    {!! isset($list_data['remarks_actual'])?$list_data['remarks_actual'][$k]:'' !!}
                                </td>

                                <td class="td_class">
                                    <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#dayModal" onclick="show_detail_track({!! $data['relation_id'] !!}, {!! $list_data['packs_actual_id'][$k] !!} )" >详情 </button>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div class="modal fade text-center" id="dayModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" aria-labelledby="myModalLabel1" >
    <div class="modal-dialog" style="display:inline-block;width:auto;" >
        <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="myModalLabel1">
                    
                </h4>
            </div>
            <div class="modal-body">
                <div style="overflow:auto;height:600px;width: 800px;">
                    <table  class="table table-responsive no-padding table-striped">
                        <tbody class="show_view">
                            
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){

    })

    //订单总数
    var order_sum = parseInt({{ $data['order_sum'] }}) ;
    //累计计划
    var plan_qty = parseInt({{ $data['plan_qty'] }}) ;
    //操作之前累计实际
    var actual_qty = parseInt({{ $data['actual_qty'] }} );
    $(".set_actual").change(function(e) {
        checkNumber(this,0,9999999,1)
        var now_actual_val = parseInt(e.currentTarget.value);
        //计划剩余
        var surplus = order_sum - actual_qty - now_actual_val;
        $(".plan_surplus").val(surplus);
        $(".plan_surplus").html(surplus);
        //完成率
        var packs_plan = parseInt({{ $data['packs_plan'] }});
        if (packs_plan !== packs_plan) {
            completion_per = '';
        }
        else {
            var completion_per = ((now_actual_val / packs_plan)*100).toFixed(2);
        }
        $(".completion_per").html(completion_per);
        //订单比例
        var done_per = (((actual_qty + now_actual_val) / order_sum)*100).toFixed(2);
        $(".done_per").html(done_per);
        var all_actual_num = actual_qty + now_actual_val;
        $(".all_actual_num").val(all_actual_num);
        $(".all_actual_num").html(all_actual_num)
    })

</script>

<script>
    function show_detail_track(relation_id,fabric_id)
    {
        // 获取当天日期下的多次提交的数据
        $.ajax({
             url: "/admin/patfabric/getDaysDetail",
             type: "post",
             data:{
                 '_token':LA.token,
                 'relation_id':relation_id,
                 'fabric_id':fabric_id
             },
             dataType:'json',
             success: function (res) {
                 show_view(res.data)
             }
         });
    }
    function show_view(data)
    {
        var show_view = $(".show_view");
        show_view.empty()
        var html = "";
        html += `
            <tr>
                <td class='td_class_modal'>录入数量</td>
                <td class='td_class_modal'>备注</td>
                <td class='td_class_modal'>操作时间</td>
            </tr>
        `;
        if (data != undefined) {
            $("#myModalLabel1").html(data[0]['type_name']+data[0]['batch_date']+"的详情信息");
            for(var i in data)
            {
                html += `
                    <tr>
                        <td class='td_class_modal'>`+data[i]['batch_qty']+`</td>
                        <td class='td_class_modal'>`+data[i]['remarks']+`</td>
                        <td class='td_class_modal'>`+data[i]['created_at']+`</td>
                    </tr>
                `;
            }
        }else{
            $("#myModalLabel1").html("暂无内容");
        }
        show_view.append(html);
    }