Ok, I'm baffled and I hope that it's only my lack of experience and/or knowledge.
I'm currently working on a simple app to generate a table with chosen (or random) background. Core code looks like this:
let getRandomInt = (max) => {
return Math.floor(Math.random() * max);
};
$(document).ready( () => {
$("#print").click( () => {
$(".noprint").toggle();
window.print();
$(".noprint").toggle();
});
$("#generate").click( () => {
let colourPick = $("#colour:checked").attr("value");
// ignore getRandomInt, its defined outside of this event handler
if (colourPick == "rand"){
$("table.printedTable").css("background-image", `url("../static/bgs/${getRandomInt(9)}.gif")`);
} else {
$("table.printedTable").css("background-image", `url("../static/bgs/${colourPick}.gif")`);
}
});
});.printedTable {
background-image: url("bgs/0.gif");
background-repeat: repeat;
}
.noprint {
background-image: none;
}
div.colourSample{
display: inline-block;
width: 1rem;
height: 1rem;
background-repeat: repeat;
}
.c0 {background-image: url("bgs/0.gif");}
.c1 {background-image: url("bgs/1.gif");}
.c2 {background-image: url("bgs/2.gif");}
.c3 {background-image: url("bgs/3.gif");}
.c4 {background-image: url("bgs/4.gif");}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="noprint">
<tr>
<td colspan="5"><input type="radio" name="colour" id="colour" value="rand" checked> Random</td>
</tr>
<tr>
<td><input type="radio" name="colour" id="colour" value="0"> <div class="colourSample c0"></div></td>
<td><input type="radio" name="colour" id="colour" value="1"> <div class="colourSample c1"></div></td>
<td><input type="radio" name="colour" id="colour" value="2"> <div class="colourSample c2"></div></td>
<td><input type="radio" name="colour" id="colour" value="3"> <div class="colourSample c3"></div></td>
<td><input type="radio" name="colour" id="colour" value="4"> <div class="colourSample c4"></div></td>
</tr>
</table>
<table class="printedTable">
<!-- An actual table to be printed -->
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>Dolor</td>
<td>Sit amat</td>
</tr>
</table>
<input id="generate" type="button" class="noprint" value="generate!">
<input id="print" type="button" class="noprint" value="print!">
</div>The problem here is that when I try to print the page (either with ctrl+p or print button there) no background images are showing on the table to be printed. Divs with colour samples - look fine, buttons (they have their css as well I just didnt include it) - great, but table is simply transparent no matter what. And it is the only jQuery-generated element on the page. What am I missing here? I know that by default most web browsers wont print bg images but I made sure that that's not the case here (I think - other backgrounds are showing).
