Develop Reference

JS/JQuery how to hide n table rows with category filter

I have a table where I can hide results by category using checkboxes. I'm trying to think of how I can hide additional results (e.g. only show the top 10, 15, 25... per category) using a dropdown menu and a slice function, but it's not clear to me how I should go about this they way the code is currently set up. The goal is to show only the top n results per selected cluster. Any help would be greatly appreciated.
Here is my code:
// Select cluster
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
var checked = $(this)[0].checked;
$("tr").each(function() {
if($(this).find("td:eq(0)").html() === inputValue.toString()) {
if(checked) {
$(this).show(); // slice by n numbers here
} else {
$(this).hide();
}
}
});
});
});
function checkedAll() {
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for(var i = elements.length; i--;) {
if(elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
$(elements[i]).trigger("change");
}
}
}
// Select n genes per cluster
$('#dropdown').change(function() {
var number = $(this).find('option:selected').attr('data-number');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>
Show/hide clusters
</p>
<div id="filter">
<form action="" method="post" name="frm1" id="frm1">
<table>
<tr>
<input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll.call(this);" checked/> select all
</tr>
<tr>
<td><input value=0 type="checkbox" name="cluster_ids" checked/> 0</td>
</tr>
<tr>
<td><input value=1 type="checkbox" name="cluster_ids" checked/> 1</td>
</tr>
<tr>
<td><input value=2 type="checkbox" name="cluster_ids" checked/> 2</td>
</tr>
<tr>
<td><input value=3 type="checkbox" name="cluster_ids" checked/> 3</td>
</tr>
<tr>
<td><input value=4 type="checkbox" name="cluster_ids" checked/> 4</td>
</tr>
</table>
</form>
</div>
<br>
<p>
Show n genes per cluster
</p>
<div>
<select id="dropdown">
<option value="">select one</option>
<option value=5>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=25>25</option>
</select>
</div>
<br>
<table border="1" class="table">
<thead>
<tr style="text-align: right;">
<th style="min-width: 1px;">Leiden</th>
<th style="min-width: 1px;">gene_name</th>
<th style="min-width: 1px;">Z_score</th>
<th style="min-width: 1px;">pval_adj</th>
<th style="min-width: 1px;">log_FC</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>mt-Rnr1_mm10</td>
<td>19.3</td>
<td>6.5e-29</td>
<td>744.2</td>
</tr>
<tr>
<td>0</td>
<td>mt-Rnr2_mm10</td>
<td>18.9</td>
<td>1.0e-28</td>
<td>594.3</td>
</tr>
<tr>
<td>0</td>
<td>Nedd4_mm10</td>
<td>18.8</td>
<td>1.0e-28</td>
<td>26.9</td>
</tr>
<tr>
<td>0</td>
<td>Col1a2_mm10</td>
<td>18.1</td>
<td>1.0e-27</td>
<td>49.6</td>
</tr>
<tr>
<td>0</td>
<td>Itgb1_mm10</td>
<td>17.2</td>
<td>1.3e-26</td>
<td>15.4</td>
</tr>
<tr>
<td>0</td>
<td>Hsp90b1_mm10</td>
<td>17.2</td>
<td>1.3e-26</td>
<td>26.4</td>
</tr>
<tr>
<td>0</td>
<td>Srrm2_mm10</td>
<td>17.1</td>
<td>1.7e-26</td>
<td>29.8</td>
</tr>
<tr>
<td>0</td>
<td>Canx_mm10</td>
<td>16.9</td>
<td>3.3e-26</td>
<td>17.1</td>
</tr>
<tr>
<td>0</td>
<td>Prrc2c_mm10</td>
<td>16.8</td>
<td>3.4e-26</td>
<td>19.2</td>
</tr>
<tr>
<td>0</td>
<td>Ccdc88a_mm10</td>
<td>16.7</td>
<td>3.6e-26</td>
<td>11.1</td>
</tr>
<tr>
<td>0</td>
<td>Rbfox2_mm10</td>
<td>16.6</td>
<td>5.2e-26</td>
<td>20.0</td>
</tr>
<tr>
<td>0</td>
<td>mt-Cytb_mm10</td>
<td>16.5</td>
<td>5.9e-26</td>
<td>17.1</td>
</tr>
<tr>
<td>0</td>
<td>Nipbl_mm10</td>
<td>16.5</td>
<td>6.9e-26</td>
<td>14.8</td>
</tr>
<tr>
<td>0</td>
<td>Birc6_mm10</td>
<td>16.5</td>
<td>5.2e-26</td>
<td>17.6</td>
</tr>
<tr>
<td>0</td>
<td>Ddx5_mm10</td>
<td>16.5</td>
<td>6.9e-26</td>
<td>14.2</td>
</tr>
<tr>
<td>0</td>
<td>Rbm25_mm10</td>
<td>16.5</td>
<td>6.9e-26</td>
<td>19.4</td>
</tr>
<tr>
<td>0</td>
<td>Dst_mm10</td>
<td>16.3</td>
<td>1.1e-25</td>
<td>20.6</td>
</tr>
<tr>
<td>0</td>
<td>Eif3a_mm10</td>
<td>16.3</td>
<td>1.3e-25</td>
<td>17.1</td>
</tr>
<tr>
<td>0</td>
<td>Igf1r_mm10</td>
<td>16.3</td>
<td>1.1e-25</td>
<td>21.3</td>
</tr>
<tr>
<td>0</td>
<td>Asap1_mm10</td>
<td>16.2</td>
<td>1.4e-25</td>
<td>28.5</td>
</tr>
<tr>
<td>0</td>
<td>Lpp_mm10</td>
<td>16.1</td>
<td>1.4e-25</td>
<td>44.9</td>
</tr>
<tr>
<td>0</td>
<td>Ubr5_mm10</td>
<td>16.0</td>
<td>2.8e-25</td>
<td>14.0</td>
</tr>
<tr>
<td>0</td>
<td>Ahnak_mm10</td>
<td>16.0</td>
<td>3.4e-25</td>
<td>41.4</td>
</tr>
<tr>
<td>0</td>
<td>Fubp1_mm10</td>
<td>16.0</td>
<td>2.6e-25</td>
<td>13.1</td>
</tr>
<tr>
<td>0</td>
<td>Sf3b1_mm10</td>
<td>15.9</td>
<td>2.2e-25</td>
<td>8.6</td>
</tr>
<tr>
<td>1</td>
<td>NUB1_hg38</td>
<td>8.9</td>
<td>9.5e-11</td>
<td>3.7</td>
</tr>
<tr>
<td>1</td>
<td>PKM_hg38</td>
<td>8.8</td>
<td>1.4e-10</td>
<td>5.1</td>
</tr>
<tr>
<td>1</td>
<td>HSP90B1_hg38</td>
<td>8.7</td>
<td>1.9e-10</td>
<td>13.3</td>
</tr>
<tr>
<td>1</td>
<td>TIAM1_hg38</td>
<td>8.4</td>
<td>1.5e-10</td>
<td>6.8</td>
</tr>
<tr>
<td>1</td>
<td>PNN_hg38</td>
<td>8.4</td>
<td>5.6e-10</td>
<td>8.6</td>
</tr>
<tr>
<td>1</td>
<td>CHD4_hg38</td>
<td>8.3</td>
<td>1.4e-09</td>
<td>6.5</td>
</tr>
<tr>
<td>1</td>
<td>NOP58_hg38</td>
<td>8.3</td>
<td>7.9e-10</td>
<td>6.6</td>
</tr>
<tr>
<td>1</td>
<td>AGAP1_hg38</td>
<td>8.1</td>
<td>1.6e-09</td>
<td>17.2</td>
</tr>
<tr>
<td>1</td>
<td>MT-CO1_hg38</td>
<td>8.1</td>
<td>1.1e-09</td>
<td>56.8</td>
</tr>
<tr>
<td>1</td>
<td>GPHN_hg38</td>
<td>8.1</td>
<td>1.3e-09</td>
<td>16.3</td>
</tr>
<tr>
<td>1</td>
<td>PSIP1_hg38</td>
<td>8.1</td>
<td>1.4e-09</td>
<td>6.2</td>
</tr>
<tr>
<td>1</td>
<td>EIF2S3_hg38</td>
<td>8.1</td>
<td>1.1e-09</td>
<td>5.8</td>
</tr>
<tr>
<td>1</td>
<td>ANKRD36C_hg38</td>
<td>8.1</td>
<td>7.2e-10</td>
<td>5.4</td>
</tr>
<tr>
<td>1</td>
<td>RBM41_hg38</td>
<td>8.1</td>
<td>1.3e-09</td>
<td>6.0</td>
</tr>
<tr>
<td>1</td>
<td>DOCK4_hg38</td>
<td>8.1</td>
<td>8.1e-10</td>
<td>7.3</td>
</tr>
<tr>
<td>1</td>
<td>FKBP10_hg38</td>
<td>8.0</td>
<td>2.2e-09</td>
<td>5.9</td>
</tr>
<tr>
<td>1</td>
<td>KNTC1_hg38</td>
<td>8.0</td>
<td>1.1e-09</td>
<td>5.6</td>
</tr>
<tr>
<td>1</td>
<td>NUP133_hg38</td>
<td>8.0</td>
<td>1.9e-09</td>
<td>4.8</td>
</tr>
<tr>
<td>1</td>
<td>CLASP1_hg38</td>
<td>8.0</td>
<td>2.4e-09</td>
<td>8.1</td>
</tr>
<tr>
<td>1</td>
<td>CSNK1A1_hg38</td>
<td>7.9</td>
<td>2.3e-09</td>
<td>6.4</td>
</tr>
<tr>
<td>1</td>
<td>BCLAF1_hg38</td>
<td>7.9</td>
<td>1.6e-09</td>
<td>6.8</td>
</tr>
<tr>
<td>1</td>
<td>JPX_hg38</td>
<td>7.9</td>
<td>1.7e-09</td>
<td>14.5</td>
</tr>
<tr>
<td>1</td>
<td>ZNF292_hg38</td>
<td>7.9</td>
<td>9.9e-10</td>
<td>5.3</td>
</tr>
<tr>
<td>1</td>
<td>SLC6A15_hg38</td>
<td>7.9</td>
<td>4.4e-09</td>
<td>5.1</td>
</tr>
<tr>
<td>1</td>
<td>ATRX_hg38</td>
<td>7.9</td>
<td>8.9e-10</td>
<td>8.3</td>
</tr>
<tr>
<td>2</td>
<td>FIRRE_hg38</td>
<td>5.4</td>
<td>1.5e-05</td>
<td>10.0</td>
</tr>
<tr>
<td>2</td>
<td>CDK14_hg38</td>
<td>5.3</td>
<td>1.2e-05</td>
<td>4.5</td>
</tr>
<tr>
<td>2</td>
<td>E2F3_hg38</td>
<td>5.3</td>
<td>1.1e-05</td>
<td>6.1</td>
</tr>
<tr>
<td>2</td>
<td>STK3_hg38</td>
<td>5.2</td>
<td>1.1e-05</td>
<td>4.2</td>
</tr>
<tr>
<td>2</td>
<td>TTC17_hg38</td>
<td>5.1</td>
<td>2.7e-05</td>
<td>5.4</td>
</tr>
<tr>
<td>2</td>
<td>TAS2R14_hg38</td>
<td>5.1</td>
<td>2.3e-05</td>
<td>8.5</td>
</tr>
<tr>
<td>2</td>
<td>KATNBL1_hg38</td>
<td>5.1</td>
<td>3.8e-05</td>
<td>2.8</td>
</tr>
<tr>
<td>2</td>
<td>TBCK_hg38</td>
<td>5.1</td>
<td>2.7e-05</td>
<td>4.2</td>
</tr>
<tr>
<td>2</td>
<td>JMJD1C_hg38</td>
<td>5.1</td>
<td>2.9e-05</td>
<td>5.5</td>
</tr>
<tr>
<td>2</td>
<td>ARID1B_hg38</td>
<td>5.1</td>
<td>3.1e-05</td>
<td>10.0</td>
</tr>
<tr>
<td>2</td>
<td>SLC2A13_hg38</td>
<td>5.1</td>
<td>4.1e-05</td>
<td>4.8</td>
</tr>
<tr>
<td>2</td>
<td>NSMCE2_hg38</td>
<td>5.0</td>
<td>2.5e-05</td>
<td>5.6</td>
</tr>
<tr>
<td>2</td>
<td>SIMC1_hg38</td>
<td>5.0</td>
<td>3.0e-05</td>
<td>3.4</td>
</tr>
<tr>
<td>2</td>
<td>MON2_hg38</td>
<td>5.0</td>
<td>4.4e-05</td>
<td>4.3</td>
</tr>
<tr>
<td>2</td>
<td>TULP4_hg38</td>
<td>4.9</td>
<td>4.9e-05</td>
<td>5.5</td>
</tr>
<tr>
<td>2</td>
<td>ANKRD36C_hg38</td>
<td>4.9</td>
<td>4.2e-05</td>
<td>3.4</td>
</tr>
<tr>
<td>2</td>
<td>TTLL5_hg38</td>
<td>4.9</td>
<td>4.6e-05</td>
<td>3.5</td>
</tr>
<tr>
<td>2</td>
<td>TBC1D32_hg38</td>
<td>4.9</td>
<td>6.2e-05</td>
<td>6.4</td>
</tr>
<tr>
<td>2</td>
<td>ANKRD36B_hg38</td>
<td>4.9</td>
<td>5.8e-05</td>
<td>2.6</td>
</tr>
<tr>
<td>2</td>
<td>KCNQ1OT1_hg38</td>
<td>4.9</td>
<td>4.0e-05</td>
<td>5.2</td>
</tr>
<tr>
<td>2</td>
<td>RERE_hg38</td>
<td>4.9</td>
<td>4.6e-05</td>
<td>6.3</td>
</tr>
<tr>
<td>2</td>
<td>USP34_hg38</td>
<td>4.8</td>
<td>5.5e-05</td>
<td>6.0</td>
</tr>
<tr>
<td>2</td>
<td>CDKAL1_hg38</td>
<td>4.8</td>
<td>7.4e-05</td>
<td>6.7</td>
</tr>
<tr>
<td>2</td>
<td>COA1_hg38</td>
<td>4.8</td>
<td>6.1e-05</td>
<td>4.4</td>
</tr>
<tr>
<td>2</td>
<td>SLC30A9_hg38</td>
<td>4.8</td>
<td>7.0e-05</td>
<td>3.8</td>
</tr>
<tr>
<td>3</td>
<td>PABPC1_hg38</td>
<td>3.7</td>
<td>3.3e-03</td>
<td>3.9</td>
</tr>
<tr>
<td>3</td>
<td>TBK1_hg38</td>
<td>3.5</td>
<td>7.2e-03</td>
<td>2.3</td>
</tr>
<tr>
<td>3</td>
<td>CHM_hg38</td>
<td>3.4</td>
<td>7.1e-03</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>WIPI2_hg38</td>
<td>3.3</td>
<td>1.1e-02</td>
<td>2.5</td>
</tr>
<tr>
<td>3</td>
<td>MTF2_hg38</td>
<td>3.3</td>
<td>1.0e-02</td>
<td>2.6</td>
</tr>
<tr>
<td>3</td>
<td>CLTC_hg38</td>
<td>3.2</td>
<td>1.2e-02</td>
<td>2.9</td>
</tr>
<tr>
<td>3</td>
<td>FADS1_hg38</td>
<td>3.2</td>
<td>1.2e-02</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>HSP90AA1_hg38</td>
<td>3.1</td>
<td>1.3e-02</td>
<td>9.6</td>
</tr>
<tr>
<td>3</td>
<td>CDC5L_hg38</td>
<td>3.1</td>
<td>1.3e-02</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>EIF2AK1_hg38</td>
<td>3.0</td>
<td>1.5e-02</td>
<td>1.5</td>
</tr>
<tr>
<td>3</td>
<td>CLSPN_hg38</td>
<td>3.0</td>
<td>1.9e-02</td>
<td>2.3</td>
</tr>
<tr>
<td>3</td>
<td>RSL1D1_hg38</td>
<td>2.9</td>
<td>2.0e-02</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>ZFP36L1_hg38</td>
<td>2.9</td>
<td>2.2e-02</td>
<td>2.6</td>
</tr>
<tr>
<td>3</td>
<td>DIAPH1_hg38</td>
<td>2.9</td>
<td>1.9e-02</td>
<td>2.1</td>
</tr>
<tr>
<td>3</td>
<td>SLC5A3_hg38</td>
<td>2.9</td>
<td>2.0e-02</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>HECTD1_hg38</td>
<td>2.9</td>
<td>2.1e-02</td>
<td>2.0</td>
</tr>
<tr>
<td>3</td>
<td>PA2G4_hg38</td>
<td>2.9</td>
<td>2.2e-02</td>
<td>1.9</td>
</tr>
<tr>
<td>3</td>
<td>ANP32B_hg38</td>
<td>2.9</td>
<td>2.4e-02</td>
<td>2.6</td>
</tr>
<tr>
<td>3</td>
<td>CEP57_hg38</td>
<td>2.9</td>
<td>2.6e-02</td>
<td>2.5</td>
</tr>
<tr>
<td>3</td>
<td>PIGH_hg38</td>
<td>2.8</td>
<td>2.8e-02</td>
<td>3.3</td>
</tr>
<tr>
<td>3</td>
<td>PHF20_hg38</td>
<td>2.8</td>
<td>2.6e-02</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>SF3B4_hg38</td>
<td>2.8</td>
<td>2.9e-02</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>EDEM2_hg38</td>
<td>2.7</td>
<td>3.2e-02</td>
<td>2.0</td>
</tr>
<tr>
<td>3</td>
<td>TAF2_hg38</td>
<td>2.7</td>
<td>2.6e-02</td>
<td>1.3</td>
</tr>
<tr>
<td>3</td>
<td>RPL7A_hg38</td>
<td>2.7</td>
<td>3.3e-02</td>
<td>2.0</td>
</tr>
<tr>
<td>4</td>
<td>APPBP2_hg38</td>
<td>5.7</td>
<td>2.4e-04</td>
<td>3.4</td>
</tr>
<tr>
<td>4</td>
<td>CEP44_hg38</td>
<td>5.6</td>
<td>2.2e-04</td>
<td>3.3</td>
</tr>
<tr>
<td>4</td>
<td>R3HDM1_hg38</td>
<td>5.5</td>
<td>9.5e-05</td>
<td>5.5</td>
</tr>
<tr>
<td>4</td>
<td>CNBP_hg38</td>
<td>5.3</td>
<td>3.5e-04</td>
<td>2.9</td>
</tr>
<tr>
<td>4</td>
<td>GXYLT1_hg38</td>
<td>5.3</td>
<td>2.3e-04</td>
<td>2.5</td>
</tr>
<tr>
<td>4</td>
<td>RPL35A_hg38</td>
<td>5.0</td>
<td>8.6e-04</td>
<td>4.3</td>
</tr>
<tr>
<td>4</td>
<td>CCDC186_hg38</td>
<td>5.0</td>
<td>5.9e-04</td>
<td>2.7</td>
</tr>
<tr>
<td>4</td>
<td>TCF20_hg38</td>
<td>4.9</td>
<td>2.7e-04</td>
<td>3.0</td>
</tr>
<tr>
<td>4</td>
<td>TNRC6B_hg38</td>
<td>4.9</td>
<td>4.8e-04</td>
<td>6.1</td>
</tr>
<tr>
<td>4</td>
<td>DEK_hg38</td>
<td>4.7</td>
<td>4.6e-04</td>
<td>4.0</td>
</tr>
<tr>
<td>4</td>
<td>PRKRIP1_hg38</td>
<td>4.5</td>
<td>1.2e-03</td>
<td>2.6</td>
</tr>
<tr>
<td>4</td>
<td>NELFCD_hg38</td>
<td>4.4</td>
<td>2.1e-03</td>
<td>2.5</td>
</tr>
<tr>
<td>4</td>
<td>ILF3_hg38</td>
<td>4.4</td>
<td>1.6e-03</td>
<td>5.0</td>
</tr>
<tr>
<td>4</td>
<td>LRCH3_hg38</td>
<td>4.3</td>
<td>2.2e-03</td>
<td>3.3</td>
</tr>
<tr>
<td>4</td>
<td>AFDN_hg38</td>
<td>4.3</td>
<td>1.4e-03</td>
<td>5.3</td>
</tr>
<tr>
<td>4</td>
<td>SUCLG1_hg38</td>
<td>4.3</td>
<td>2.6e-03</td>
<td>2.4</td>
</tr>
<tr>
<td>4</td>
<td>NEK9_hg38</td>
<td>4.2</td>
<td>2.6e-03</td>
<td>2.8</td>
</tr>
<tr>
<td>4</td>
<td>LMBRD1_hg38</td>
<td>4.2</td>
<td>2.1e-03</td>
<td>1.9</td>
</tr>
<tr>
<td>4</td>
<td>HPS4_hg38</td>
<td>4.2</td>
<td>3.1e-03</td>
<td>3.6</td>
</tr>
<tr>
<td>4</td>
<td>RUFY1_hg38</td>
<td>4.2</td>
<td>3.0e-03</td>
<td>2.9</td>
</tr>
<tr>
<td>4</td>
<td>MYO1E_hg38</td>
<td>4.2</td>
<td>2.0e-03</td>
<td>2.2</td>
</tr>
<tr>
<td>4</td>
<td>HECTD1_hg38</td>
<td>4.2</td>
<td>3.0e-03</td>
<td>3.5</td>
</tr>
<tr>
<td>4</td>
<td>IGF2BP1_hg38</td>
<td>4.1</td>
<td>2.6e-03</td>
<td>3.5</td>
</tr>
<tr>
<td>4</td>
<td>ENSA_hg38</td>
<td>4.1</td>
<td>3.2e-03</td>
<td>2.9</td>
</tr>
<tr>
<td>4</td>
<td>SPECC1L_hg38</td>
<td>4.0</td>
<td>3.4e-03</td>
<td>4.8</td>
</tr>
</tbody>
</table>

You can take advantage of jQuery's has() and .filter() to find the <tr>s whose first <td> contains a given number, .slice() that array to get the ones after a given index, and .hide() them. (See https://stackoverflow.com/a/13528895/378779.)
It would be easiest to create a single function (I've named it doUpdate()) which does all the showing/hiding. That way you can call it whenever any of the checkboxes are checked or if the dropdown changes.
let doUpdate = function() {
// Loop through all the checkboxes:
$('table.table tr').show();
$('#frm1 tr:not(:first-child) input').each( function(){
if ( $(this).is(':checked') ) {
// Show appropriate slice of this section:
$('table.table tr')
.has('td:nth-child(1):contains(' + $(this).val().toString() + ')')
.slice($('#dropdown option:selected').val()).hide();
} else {
// Hide all rows in this section:
$('table.table tr')
.has('td:nth-child(1):contains(' + $(this).val().toString() + ')')
.hide();
}
})
}
$(document).ready(function() {
// Set up event handlers:
$('input[type="checkbox"]').change(function() {
doUpdate();
});
// Select n genes per cluster
$('#dropdown').change(function() {
doUpdate();
});
doUpdate(); // Run on load to show/hide according to initial checkbox and dropdown state
});
function checkedAll(e) {
// iterate and change status
// Iterate through the 0-4 checkboxes and set their "checked" state according to how "this" is checked:
$('#frm1 tr:not(:first-child) input').each(
function(){
$(this).prop('checked', e.checked )
}
)
doUpdate();
}
This also required a minor modification to your "select all" checkbox:
<input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll(this)" checked/> select all

Print table display text header and footer

Im having problem on how to add text header and footer when I print data table on html. I have already title on header but it seems that the default javascript on my template recognized the <title </title tags in my html. Can anyone suggest or provide solution on this problem? or Thank you in advance
ENTIRE HTML
<html>
<head>
<title></title>
<style>
#media screen
{
.noPrint{}
.titles{display:none;}
.footer{display:none;}
}
#media print
{
.noPrint{display:none;}
.title{}
.footer{}
}
</style>
</head>
<body>
<button onclick="printDiv();">Print it</button>
<table class="report-container" name="table" id="table" >
<thead class="report-header">
<th colspan="9"><div class="titles">Title Header <br></div></th>
<tr>
<td>ID Number</td>
<td>Name</td>
<td>Barangay</td>
<td>Sex</td>
<td>Sector</td>
<td>Amount</td>
<td>Signature/thumb</td>
<td>ID </td>
<td>Date Received</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=9><div class="footer">Title Footer</div></td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</body>
<script ="text/javascript">
function printDiv() {
var divToPrint = document.getElementById('table');
var htmlToPrint = '' +
'<style type="text/css">' +
'table td {' +
'border:1px solid #dddddd;' +
'padding:8px;' +
'}' +
'table {' +
'border-collapse: collapse;' +
'width: 100%;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
</script>

Without the styling, I can't see if it exactly matches what you are trying to achieve, but you can check the styling later.
The basic structure of the thead tag should be something like:
<thead>
<tr>
<th colspan=9>This should display on print</th>
</tr>
<tr>
<th>ID Number</th>
<th>Name</th>
<th>Barangay</th>
<th>Sex</th>
<th>Sector</th>
<th>Amount</th>
<th>Signature/thumb</th>
<th >ID </th>
<th>Date Received</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=9>Text for the footer goes here</td>
</tr>
</tfoot>
In your table you have 9 columns, so the title th tag needs to span all 9. This is done by adding colspan=9 into the th element itself.
The footer should be added in a similar way. Note that tfoot MUST be entered immediately after thead and BEFORE any tbody tags
(updated to include tfoot)

Change the colour of the 2nd column by comparing it with the 1st column

enter image description here
If there is a change in the number in the column, its colour should get change as well.
There are 7 columns.
Compare 1st column with the second. If the numbers are changed, its colour should get change.
Example in first row "134", "139" then "139" value colour should get change.
In second row "4" "4" is repeated, then its colour should not get change.
<table style="width:80%" id="customers" align="center">
<tr>
<th style="background-color:white;" colspan="2"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Here" title="Type in a name"></th>
<th colspan="7"> asfdasdf</th>
</tr>
<tr>
<th colspan="2"><select class="ui dropdown" id="myselection">
<option value="One">Readvon</option>
<option value="Two">sdctry</option>
<option value="Three">scv</option>
<option value="four">sdv</option>
</select></th>
<th>Nov_2013</th>
<th>March_2014</th>
<th>Dec_2015</th>
<th>Nov_2017</th>
<th>April_2018</th>
<th>Feb_2019</th>
<th>April_2019</th>
</tr>
</table>
<div id="showOne">
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</div>
</table>

You have to do something like below. Read about HTMLTableElement. You have to access rows first and then columns. Compare text in each column...
var table = document.getElementsByTagName('table');
var rows = table[0].rows
var rowsLength = rows.length;
var columns;
var columnsLength;
for (var i = 0; i < rowsLength; i++) {
columns = rows[i].cells;
columnsLength = columns.length;
// We don't need first column, as it contains the text
for (var j = 1; j < columnsLength - 1; j++) {
if (parseInt(columns[j].innerText) != parseInt(columns[j + 1].innerText)) {
columns[j + 1].style.color = 'green';
}
}
}
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
</tr>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
</tr>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
</tr>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
</tr>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>

Fixed row inside a horizontally scrollable table

I have a very long table with horizontal scrolling. Is it possible to implement a fixed row inside this table without horizontal scroll.
<div class="container" style="width:500px;height:100px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;height:200px;left:0;right:0">
<td colspan="7" style="width:500px;">
<div id="noscroll" style="display: inline-block;">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
EDIT: What if I need two cell in the fixed row?
<tr class="fixed-row">
<td colspan="3">
A row unaffected by
</td>
<td colspan="3">
horizontal scroll
</td>
</tr>
https://jsfiddle.net/7nz6ys2m/2/

Try the following:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0">
<td colspan="7" style="width:500px;height:22px;position: relative;">
<div id="noscroll" style="display: inline-block;position: fixed;transform: translateY(-50%);">
A row unaffected by horizontal scroll
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
What I did:
Give the noscroll-div position:fixed; and reset its position with transform. Then I set the height of its parent td to a fixed height of 22px (the other td are all 22px) and set its position to relative.
In case you need multiple td in the fixed row, I would rather take multiple div inside one td, and float them left. see this:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0;height:22px;position: relative;">
<td style="position: fixed;" colspan="7">
<div style="width:250px;float: left;">
test1
</div>
<div style="width:250px;float:left;">
test2
</div>
</div>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>

With a little bit of jQuery, we can get the behavior with safe vertical scrolling.
<div class="container" style="width:500px;height:300px;overflow:auto;">
<table style="width:1500px;height:500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr style="">
<td colspan="6" style="">
<div class="fixed-row">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(".container").scroll(function () {
$(".fixed-row").css("margin-left",$(".container").scrollLeft() + "px");
});
</script>
<style>
table{
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.fixed-row {
display: inline-block;
width: 500px;
text-align: center;
}
</style>
https://jsfiddle.net/7nz6ys2m/4/

How to select 5 successive rows

I got a table with several trs. I want to select 5 trs in a row and give them a background color, then take the next 5 trs and give them another background color - like even and odd, but with 5 elements as a block.
This is what I have tried
var trs = $('table.small-only tr');
for (var i = 1; i < trs.length; i += 5) {
if (i%2 == 0){
// select even blocks
}else {
// select odd blocks
}
}
This doesn't work though.
How can I select blocks containing 5 trs and give the even and odd blocks different background colors in a proper way?
I found a work around:
for (var i = 1; i < trs.length; i += 5) {
trs.slice(i, i + 5).wrapAll("<div></div>");
}
and
div {
&:nth-of-type(odd) {
background: #f2f2f2 !important;
}
}
But clearly putting divs around trs in a table isn't a good way.

Here is my example:
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var my_table_rows= $('.my-table tr');
var color;
for (var i = 0; i < my_table_rows.length; i++){
if (i % 5 === 0) color = getRandomColor();
my_table_rows.eq(i).css('background', color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
</table>

To achieve this you can loop through the tr elements in the table stepping over the number of rows you want per group. You can then use slice() to retrieve the set number of rows before calling addClass() on them. Try this:
var groupSize = 5;
var classes = ['group1', 'group2'];
var $rows = $("table.small-only tr");
for(var i = 0; i < $rows.length; i += groupSize) {
$rows.slice(i, i + groupSize).addClass(classes[i / groupSize % classes.length]);
}
.group1 { background-color: #C00; }
.group2 { background-color: #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="small-only">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
</table>

but clearly putting divs around trs in a table isnt a good way
No, it is invalid html. However you can use <tbody> instead of <div>
A table can have any number of <tbody> elements

You can do like that way
HTML
<table class="table">
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
Jquery
$(function(){
var limit = 5;
var arr = ['red','green','yellow','blue','orange'];
$('.table tr').each(function(i,e){
var ind = parseInt((i/limit));
$(this).css('background',arr[ind]);
})
})

You can also use CSS selector :nth-child(xn) and :not():
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {background-color:gray}
tr {
background: turquoise;
counter-increment: trs;
}
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {
background: tomato
}
/* check row numbers */
tr:before {
content: counter(trs);
display: table-cell;
padding: 0.25em;
border: solid;
background: yellow;
}
tr:nth-child(odd):before {
background: gray;
}
td {
padding: 0.25em;
border: solid;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>