Hide td nulla in JAVASCRIPT print

Question

On my system I made a button to print a screen. It’s working all correctly, the problem is the following.

In the picture below you can see that the part of Current User is coming nulla, as it has no user data this is ok, I just need that when you are current user is null (no data) it does not display in print.

Could someone help me with this? is part of the print I made in Javascript. I will post the code below the photo.

DIV

<div class="modal Detalhes fade" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="text-center">
                    <h3>Detalhes do paciênte!</h3>
                </div>
                <br />
                <div class="actions" style="float:right;">
                    <button class="ui teal submit button lef print-link" onclick="PrintElem('printOK','Usuário')" id="btnPrint">Imprimir</button>
                    <div class="ui approve green button btn_ok">OK</div>
                </div>
                <br /><br /><br />
                <div class="actions">
                    <div id="printOK">
                        <table style="width:100%" border="1">
                            <thead>
                                <tr>
                                    <th id="colAlterado">
                                        Usuário alterado
                                    </th>
                                    <th id="colAtual">
                                        Usuário atual
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="trInser1"></td>
                                    <td id="tdInser2"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript Pulling data to div

$(document).ready(function () {
    $('[name="btn_detalhes"]').click(function () {
        var altaUtiId = $(this).attr('id');
        var patientId = $(this).attr('data-content');
        $.ajax({
            method: 'POST',
            url: '/Formulario/AltaUTI/VerificaDiff',
            data: { 'PatientId': patientId, 'AltaUtiId': altaUtiId },
            success: function (response) {
                var t1 = response[0];
                var t2 = response[1];
                var registro = response[2];
                if (t1.length > 0 || t2.length > 0) {
                    $('#msgLoading').fadeIn(0);
                    $('.modal.Detalhes').modal({
                        closable: false,
                        blurring: true,
                    }).modal('show');
                    for (var i = 0; i < t1.length; i++) {
                        $('#trInser1').append('<p> ' + t1[i] + ' </p>');
                        if (t2.length > 0) {
                            $('#tdInser2').append('<p> ' + t2[i] + ' </p>');
                            $('#tdInser2').removeClass('display-none');
                            $('#colAtual').removeClass('display-none');
                        }
                        else {
                            if (registro.length > 0)
                                $('#colAlterado').text('Usuário alterado');
                            else
                                $('#colAlterado').text('Usuário atual');

                            $('#tdInser2').addClass('display-none');
                            $('#colAtual').addClass('display-none');
                        }

                    }
                    $('#msgLoading').fadeOut(0);
                } else {
                    notif({
                        'type': 'error',
                        'msg': 'Não foi encontrado modificações no formulário!',
                        'position': 'center'
                    });
                }
            },
            error: function (response) {
                notif({
                    'type': 'error',
                    'msg': 'Erro na resposta do servidor!',
                    'position': 'center'
                });
            }
        })
    });

    $('.btn_ok').click(function () {
        $("p").remove();

        $('.modal.Detalhes').modal('hide');
    });
});

Javascript Of the Printing Part

//Imprimir o modal gerado
function PrintElem(elem, form) {
    var mywindow = window.open('', 'PRINT', 'height=500,width=700');

    mywindow.document.write('<html><head><title>' + document.title + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>Relatório de alteração detalhada de dados – ' + document.title + ' </h1>');
    mywindow.document.write('<h2>Formulário: ' + form + '</h2>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

In case the two Trs Current User and Altered User, have data it displays normally like photo down below.

Answer 1

Well, I can make a suggestion. When you don’t have to show, set a custom class to class="nao-mostrar", shouldn’t be a problem in . js.

Create the following in a css:

@media print {
 *{
  visibility: visible;
};

.nao-mostrar{visibility: hidden;}

}

see if it works....