Modifying @media print using jQuery

Question

Is there a way to manipulate the @media print with jQuery?

I have a table and I want to count the rows and if the number of rows is greater than a specific number I would apply the page-break-after

$('.print').on('click', function () {
    var r = 0;
    $('.invoice table tbody tr').each(function () {
    r+=1;
    if(r == 30){
        if($('.footer').css('display') == 'none'){
            $('.invoice table tbody').css('page-break-after', 'always');
        }
    }
})

Where

• the $('.print') is the button that trigger the window.print() action but it doesn't workI hide the footer while printing using @media print in css file

• I hide the footer while printing using @media print in css file (the '.invoice table tbody' has also a specific styling in @media print and i want to add the page break property but using jQuery)

Answer 1

Use a css style rule for a class and add that class where applicable. Something like:

var numRows = $('.invoice table tbody tr').length;

if(numRows >= 30 && !$('.footer:visible').length ){
   $('.invoice table tbody').addClass('page-break-class')
}

CSS

@media print {
    tbody.page-break-class {page-break-after: always;}
}