I want to print a table using javascript by window.print() in the javascript but after adding the style for the tr:nth-child(even) in the @media print also it is not applying but the border none is working fine I Can’t find the solution for it.I have provided my Javascript code below.
I have tryed all the methods to make the background color to have effect at print screen.I Also used linking the bootstrap cdn to have the effect. It also all the appoaches to have the strip effect.
<code> function generatePDF() {
var contentToPrint;
var example2 = document.getElementById('example2');
var select_date = document.querySelector('#daterange-btn span');
var date = select_date.textContent;
if (example2.style.display === 'none') {
contentToPrint = document.getElementById('example1').innerHTML;
} else {
contentToPrint = example2.innerHTML;
}
var printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>Print</title>');
printWindow.document.write('<style>');
printWindow.document.write('@media print {');`your text`
printWindow.document.write('.no-print { display: none; }');
printWindow.document.write('table { border-collapse: collapse; width: 100%; }');
printWindow.document.write('th, td { border: none; padding: 8px; }');
printWindow.document.write('th { display: none; }'); // Hide table header
printWindow.document.write('.table-striped tr:nth-child(even) {background-color: #f2f2f2;}');
printWindow.document.write('a { text-decoration: none; color: inherit; }');
printWindow.document.write('}');
printWindow.document.write('</style>');
printWindow.document.write('</head><body>');
printWindow.document.write('<h2>Bagged Items Report</h2>');
printWindow.document.write('<p>'+date+'</p>');
printWindow.document.write('<h4 style="border-bottom:2px solid black;">Search Results</h4>');
printWindow.document.write(contentToPrint);
printWindow.document.write('</body></html>');
printWindow.document.close();
// Print the content
printWindow.print();
}
</code>
<code> function generatePDF() {
var contentToPrint;
var example2 = document.getElementById('example2');
var select_date = document.querySelector('#daterange-btn span');
var date = select_date.textContent;
if (example2.style.display === 'none') {
contentToPrint = document.getElementById('example1').innerHTML;
} else {
contentToPrint = example2.innerHTML;
}
var printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>Print</title>');
printWindow.document.write('<style>');
printWindow.document.write('@media print {');`your text`
printWindow.document.write('.no-print { display: none; }');
printWindow.document.write('table { border-collapse: collapse; width: 100%; }');
printWindow.document.write('th, td { border: none; padding: 8px; }');
printWindow.document.write('th { display: none; }'); // Hide table header
printWindow.document.write('.table-striped tr:nth-child(even) {background-color: #f2f2f2;}');
printWindow.document.write('a { text-decoration: none; color: inherit; }');
printWindow.document.write('}');
printWindow.document.write('</style>');
printWindow.document.write('</head><body>');
printWindow.document.write('<h2>Bagged Items Report</h2>');
printWindow.document.write('<p>'+date+'</p>');
printWindow.document.write('<h4 style="border-bottom:2px solid black;">Search Results</h4>');
printWindow.document.write(contentToPrint);
printWindow.document.write('</body></html>');
printWindow.document.close();
// Print the content
printWindow.print();
}
</code>
function generatePDF() {
var contentToPrint;
var example2 = document.getElementById('example2');
var select_date = document.querySelector('#daterange-btn span');
var date = select_date.textContent;
if (example2.style.display === 'none') {
contentToPrint = document.getElementById('example1').innerHTML;
} else {
contentToPrint = example2.innerHTML;
}
var printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>Print</title>');
printWindow.document.write('<style>');
printWindow.document.write('@media print {');`your text`
printWindow.document.write('.no-print { display: none; }');
printWindow.document.write('table { border-collapse: collapse; width: 100%; }');
printWindow.document.write('th, td { border: none; padding: 8px; }');
printWindow.document.write('th { display: none; }'); // Hide table header
printWindow.document.write('.table-striped tr:nth-child(even) {background-color: #f2f2f2;}');
printWindow.document.write('a { text-decoration: none; color: inherit; }');
printWindow.document.write('}');
printWindow.document.write('</style>');
printWindow.document.write('</head><body>');
printWindow.document.write('<h2>Bagged Items Report</h2>');
printWindow.document.write('<p>'+date+'</p>');
printWindow.document.write('<h4 style="border-bottom:2px solid black;">Search Results</h4>');
printWindow.document.write(contentToPrint);
printWindow.document.write('</body></html>');
printWindow.document.close();
// Print the content
printWindow.print();
}
New contributor
Guru1804 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.