To easily display the content on page load, you can simply execute the showMe('box') function:
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
showMe('box');
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
...
</table>
A more effective method is to eliminate inline onclick events and attach an unobtrusive change event listener to checkboxes. This way, you can trigger the event during page load for better performance.
It's worth noting that this alternative approach removes the need for the initial loop in your script. Here's how you can implement it:
jQuery($ => {
$('.show').on('change', e => {
var targetClass = $(e.target).data('targetclass');
$('.' + targetClass).toggle();
}).trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" class="show" data-targetclass="box">Show Result
</td>
</tr>
...
</table>
Additionally, it's recommended to avoid inline CSS styling and attributes like width, cellpadding, etc. Instead, use external stylesheets for a cleaner structure. Also, refrain from using deprecated elements such as font.