I have an html page with four(4) different tables generated with a while loop on page load, each table has a print button with a unique I 'd. I.e Table1 print button id is 1,Table2 print button id is 2. Etc. On click of any of the print button, it 's button id value is attached to the div that wraps the table. This works fine.
The issue now is if I select the div based on the id value clicked, it always prints out the table 1 with id value of 1 even if table 4 print button is clicked. This is my code for better understanding of the issue..
<?php
//Sql code to get data from db omitted.
//load datas into table.
$sn =0;
while($r7 = $return7->fetch_assoc()){
$sn += 1;
echo'<!DOCTYPE html>
<html>
<head>
<title>Home |e-Results</title>
<meta charset="utf-8">
<link href="assets/ehome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery includes-->
<script src="../../exams/assets/jquery-3.6.0/dist/jquery.min.js"></script>
<!-- css-->
<link rel="stylesheet" href="../../exams/assets/bulma/css/bulma.css">
</head>
<body>';
echo'<div id ="" class="printWrapper">
<section id="showTable" class="section">
<div id="" class="box">
<h4 class="tag is-warning is-centered"> Click on each course/Subject to view full details</h4>';
//session/year of exam value display for each table.
echo' <div id="yearDisplay" class="button is-primary">';
echo $year;
echo'</div>';
echo'<div class="table-container">
<table id="resTable" class="table is-bordered is-striped is-hoverable is-fullwidth is-narrow">
<!-- Your table content -->
<thead>
<tr>
<th>S/N</th>
<th>COURSE</th>
<th>DESCRIPTION</th>
<th>TOTAL %</th>
<th>GRADE</th>
<th>REMARKS </th>
</tr>
</thead>
<tbody>
<tr>
</td>';
echo"<tr>";
echo"<td>".$sn."</td>";
echo"<td class='tag is-success'>".$r7['exam']."</td>";
echo"<td>".$r7['description']."</td>";
echo"<td>".$r7['finalScore']."</td>";
echo"<td>".$r7['grade']."</td>";
echo"<td>".$r7['remarks']."</td>";
echo"</tr>";
echo"</tbody>
</table>";
echo"<button id='$sn' class='button is-link is-rounded is-small block printdiv '>Print</button>";
echo'
</div>
</section>
</div>';
}//while end.
echo'</body></html>';
?>
This is the JavaScript to print.
$(document).ready(function() {
$(".printdiv").click(function() {
var id = $(this).attr("id");
$(".printWrapper").attr("id", id);
//Below to test if the id is attached for each print button that is clicked which works fine.
//alert($(".printWrapper").attr("id")); return;
//Now to print div based on the id of button clicked.
var div = $("#" + id).html();
//function to handle the printing.
function printThis() {
var a = window.open('', '', 'height=500, width=500');
a.document.write('<!DOCTYPE html><html>');
a.document.write('<head><link rel="stylesheet" href="../../exams/assets/bulma/css/bulma.css">');
a.document.write('</head>');
a.document.write('<body><h1><br>');
a.document.write(div);
a.document.write('</body></html>');
a.document.close();
a.print();
}
printThis();
});
}); //docs end.
The issue again is that, it always prints the table 1 even if any other button is clicked.
What am expecting for example is that, if print button on table 4 is clicked then div with id=4 should be printed. Same with Table2, table 3. Etc
Thanks for your help!!!
– mplungjan Aug 04 '21 at 16:07');` instead