I'm currently using jQuery 3.3.1. In some views of my application, I remove the text of some table elements. You an see the simple code below.

var original = <?= $original ? 'true' : 'false'; ?>;

if(original) {
    $('table thead tr th:eq(9)').text('');
    $('table tbody tr td:nth-child(10)').text('');
}

However, when I generate the PDF, the text in each th/td is not being overwritten with '{blank}' when $original = true. Is there a way to fix this? Or a workaround? I'm using the same PHP template file and hiding/showing elements based on the action. Thanks!

I found a workaround by manually embedding these styles in a <style> tag on the template:

<?php if($original == true) { ?>
    <style>
        table thead tr th:nth-child(10) {
            font-size: 0;
        }

        table tbody tr td:nth-child(10) {
            font-size: 0;
        }
    </style>
<?php } ?>

Since I control a lot of formatting with jQuery, I'd like to keep it consistent. Thanks.

This example document worked fine for me:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
window.onload = function() {
    $('table tbody tr td:nth-child(2)').text('');
};
</script>
<table>
<tr><td>ABC</td><td>DEF</td><td>GHI</td></tr>
<tr><td>ABC</td><td>DEF</td><td>GHI</td></tr>
<tr><td>ABC</td><td>DEF</td><td>GHI</td></tr>
<tr><td>ABC</td><td>DEF</td><td>GHI</td></tr>
</table>

Note that JavaScript needs to be enabled.

Okay--so I enabled Javascript:

$Prince->setJavaScript(true);

However, It's still not working. Unlike your example, all of my JS is in $(document).ready(function() {....})

<script>
    $(document).ready(function() {
        var original = <?= $original ? 'true' : 'false'; ?>;
        if(original) {
            $('table thead tr th:eq(9)').text('');
            $('table tbody tr td:nth-child(10)').text('');
        }
    });
</script>

My code works fine when run from the browser.

Edited 19 Jun 2019 by jprateragg