Question

我有一个包含FORM字段的HTML页面。我想基于某些条件打破HTML页面（我将此条件视为$ CheckForm）。我尝试使用css元素page-break-after / before但这对我不起作用，因为我有一个表格，通过单击Add Row按钮将动态行添加到HTML表单中。

$(function() {
            console.log("Custom Javascript Loading");
            //console.log($("#row30").closest("div").attr("id"));
            var m_names = new Array("Jan", "Feb", "Mar", 
            "Apr", "May", "Jun", "Jul", "Aug", "Sep", 
            "Oct", "Nov", "Dec");

            var dateToday = new Date();
            var curr_date = dateToday.getDate();
            var curr_month = dateToday.getMonth();
            var curr_year = dateToday.getFullYear();
            var today = curr_date + " " + m_names[curr_month] + " " + curr_year;

            $('#projectNo').focus();

            var $checkForm = 31;

            if($checkForm < 30){
                $('#estimatedDate').val(today);
                $('#promiseDate1').val(today);  
            }
            if($checkForm > 30){
                $(".req_field").css("cssText", "color: black !important;");
                $(':input').removeAttr('placeholder');
                for(var $i=1;$i<=25;$i++){
                    if(($('input:radio[name=supplier'+$i+']:checked').val()) && ($('.member'+$i+'').css('display')=="table-row")){
                        $('#supplierBlock'.concat($i)).hide();
                        $('#supplierText'.concat($i)).removeClass('supplierDisplay');
                        $('#supplierText'.concat($i)).val($('input:radio[name=supplier'+$i+']:checked').val());
                    }
                }
                $('#add_row').remove();
                $('#add_row').height(0);
                $('#delete_row').remove();
                $('#delete_row').height(0);
                $('#imgDateSet').remove();
            }
            var writeT = "";
            if($checkForm > 30){
                for(var $i=1;$i<=36;$i++){
                    var temp = '#row'+$i;
                    var tempDisplay = $(temp).css('display');

                    //$('#projectNo').val($('#row11').offset().top.toFixed(2)+','+$('#row30').height());
                    if (tempDisplay != "none"){
                        console.log(temp+':'+$(temp).attr('id'));
                        console.log($(temp).offset().top.toFixed(2));
                        var rowHeight = $(temp).height();
                        var rowStart = $(temp).offset().top.toFixed(2);
                    }

                    writeT = writeT + ', '+temp +':'+$(temp).offset().top.toFixed(2);

                    var checkPage = Math.floor(rowStart / 1080 );
                    if(rowStart > 1000){
                        rowStart = rowStart - (1080 * checkPage);
                    }
                    //console.log('I val:'+$i+'->'+rowStart);
                    if ((rowStart + rowHeight) > 963){ //963    
                        var $m1 = $('<div class="ui page grid" style="page-break-before:auto !important;"></div>').appendTo('form');
                        var $m2 = $('<div class="wide column"></div>').appendTo($m1);
                        var $m3 = $('<div class="ui divider hidden"></div>').appendTo($m2);
                        var $m4 = $('<div class="ui segment form"></div>').appendTo($m2);

                        $($m2).append('<footer><p style="font-size:11px"><a href="#"><span style="float:left;">COMPANY CONFIDENTIAL AND PROPRIETARY</span><span style="float:right;">Copyright &copy <span>'+dateToday.getFullYear()+'</span> Fisher BioServices, Inc. All Right Reserved</span></a></p></footer>');
                        $($m2).prepend('<h1></h1><table class="ui celled table"><tr><td><img src=""/></td><td>SPECIFICATION NUMBER:<span style="float:right;font-weight:bold; color:blue">FBS-FRM-0186</td></tr><tr><td style="text-align:center;" colspan="2"><span style="font-weight:bold; font-size:15px;">REQUEST FOR VALIDATION SERVICES</span></td></tr></table>');

                        if (($i >= 1 && $i <=4) || ($i >= 31 && $i <=36)){
                            $(temp).nextAll().andSelf().appendTo($m4);
                        }

                        if(($i >= 5 && $i <=30) && (tempDisplay != "none")){
                            var $t1 = $('<table id="requirementDetails'+$i+'" name="requirementDetails'+$i+'" class="ui celled" style="table-layout:auto"></table>');
                            var $t2 = $('<thead></thead>').appendTo($t1);
                            var $t3 = $('<tr style="height:40px !important;"><th class="th1">Number</th><th class="th2">Required Component</th><th class="th2">Description / Specific Manufacturer requirement</th><th class="th2">Quantity per BR / Kit #</th><th class="th2">FBS / Client Supplied</th><th class="req_field th2">*PR #</th><th class="req_field th2">*CMP or CTS #</th><th class="req_field th2">*Promise date from Client / FBS Purchasing</th><th class="th2">MSDS provided (drug product only)</th></tr>').appendTo($t2);
                            var $t3 = $('<tbody></tbody>').appendTo($t1);
                            $(temp).nextAll().andSelf().appendTo($t3);

                            var $m5 = $('<div id="furtherInfo'+$i+'"></div>').appendTo($m4);
                            var $m6 = $($t1).appendTo($m5);
                            $(temp).closest('div').nextAll().andSelf().appendTo($m4);
                        }
                    }
                    //$('#comments').val(rowStart);
                }
            }
     });

我尝试使用offset（）和top（）来破坏HTML表单，如果任何行超过页面限制（我已将页面限制设置为963），则会中断页面，但某处我错过了某些内容。

这是我的Jsfiddle链接：https://jsfiddle.net/0t16c0p3/3/

任何人都可以帮助我如何实现这一目标？

如何在某些条件下动态破坏HTML页面

0 个答案: