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

Trigger keydown event on mousescroll

On div, with overflow-y: scroll, how can I scroll down with keypress down (no jQuery).
<div class="data">
...
number of data
</div>
<style>
.data {
background-color: blue;
text-align: center;
overflow-y: scroll;
margin-left: 700px;
margin-top: 50px;
height: 400px;
width: 150px;
}
</style>
https://codepen.io/SahilKatia/pen/GYVzxR
Link to the Angular Project.

If you add the attribute tabindex="0" to your .data div, that will make it "focusable" and let you scroll up and down with the keyboard when it is focused.
I'm assuming you only want the keyboard arrows to scroll your div when it's in focus, otherwise you'd have to override the existing full window scroll functionality like this:
const dataDiv = document.querySelector('body > div.data')
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
dataDiv.scrollTo(0, dataDiv.scrollTop - 10)
} else if (e.key === 'ArrowDown') {
e.preventDefault();
dataDiv.scrollTo(0, dataDiv.scrollTop + 10)
}
})

Hopefully this is the functionality you are looking for. Building on the note from #Graham you can javascript to set focus on the .data div on page load, allowing the user to scroll the table using key up/down without an initial click.
window.onload = function() {
document.getElementById("auto-focus").focus();
};
.data {
margin-top:50px;
margin-left:700px;
text-align:center;
overflow-y:scroll;
height:400px;
background-color:blue;
width:150px;
}
<div class="data" tabindex="0" id="auto-focus">
<table cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>Octavius</td>
</tr>
<tr>
<td>Amal</td>
</tr>
<tr>
<td>Hayes</td>
</tr>
<tr>
<td>Arsenio</td>
</tr>
<tr>
<td>Jackson</td>
</tr>
<tr>
<td>Chadwick</td>
</tr>
<tr>
<td>Hall</td>
</tr>
<tr>
<td>Chaim</td>
</tr>
<tr>
<td>Kennedy</td>
</tr>
<tr>
<td>Oliver</td>
</tr>
<tr>
<td>Vincent</td>
</tr>
<tr>
<td>Giacomo</td>
</tr>
<tr>
<td>Sebastian</td>
</tr>
<tr>
<td>Oren</td>
</tr>
<tr>
<td>Perry</td>
</tr>
<tr>
<td>Jesse</td>
</tr>
<tr>
<td>Laith</td>
</tr>
<tr>
<td>Kirk</td>
</tr>
<tr>
<td>Christopher</td>
</tr>
<tr>
<td>Oren</td>
</tr>
<tr>
<td>Donovan</td>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Chandler</td>
</tr>
<tr>
<td>Rajah</td>
</tr>
<tr>
<td>Lyle</td>
</tr>
<tr>
<td>Rogan</td>
</tr>
<tr>
<td>Colt</td>
</tr>
<tr>
<td>Rooney</td>
</tr>
<tr>
<td>Cruz</td>
</tr>
<tr>
<td>Connor</td>
</tr>
<tr>
<td>Walter</td>
</tr>
<tr>
<td>Roth</td>
</tr>
<tr>
<td>Adam</td>
</tr>
<tr>
<td>Roth</td>
</tr>
<tr>
<td>Kibo</td>
</tr>
<tr>
<td>Sebastian</td>
</tr>
<tr>
<td>Lawrence</td>
</tr>
<tr>
<td>Valentine</td>
</tr>
<tr>
<td>Dorian</td>
</tr>
<tr>
<td>Yuli</td>
</tr>
<tr>
<td>Matthew</td>
</tr>
<tr>
<td>Wang</td>
</tr>
<tr>
<td>Elton</td>
</tr>
<tr>
<td>Chadwick</td>
</tr>
<tr>
<td>Kibo</td>
</tr>
<tr>
<td>Reuben</td>
</tr>
<tr>
<td>Rashad</td>
</tr>
<tr>
<td>Kibo</td>
</tr>
<tr>
<td>Orlando</td>
</tr>
<tr>
<td>Amir</td>
</tr>
<tr>
<td>William</td>
</tr>
<tr>
<td>Lester</td>
</tr>
<tr>
<td>Timon</td>
</tr>
<tr>
<td>William</td>
</tr>
<tr>
<td>Dale</td>
</tr>
<tr>
<td>Timothy</td>
</tr>
<tr>
<td>Lyle</td>
</tr>
<tr>
<td>Erasmus</td>
</tr>
<tr>
<td>Amos</td>
</tr>
<tr>
<td>Gary</td>
</tr>
<tr>
<td>Dexter</td>
</tr>
<tr>
<td>Malcolm</td>
</tr>
<tr>
<td>Hyatt</td>
</tr>
<tr>
<td>Sawyer</td>
</tr>
<tr>
<td>Elton</td>
</tr>
<tr>
<td>Kennan</td>
</tr>
<tr>
<td>Alec</td>
</tr>
<tr>
<td>Prescott</td>
</tr>
<tr>
<td>Omar</td>
</tr>
<tr>
<td>Jason</td>
</tr>
<tr>
<td>Ignatius</td>
</tr>
<tr>
<td>Isaac</td>
</tr>
<tr>
<td>Aidan</td>
</tr>
<tr>
<td>Gabriel</td>
</tr>
<tr>
<td>Brody</td>
</tr>
<tr>
<td>Emerson</td>
</tr>
<tr>
<td>Burton</td>
</tr>
<tr>
<td>Axel</td>
</tr>
<tr>
<td>Clinton</td>
</tr>
<tr>
<td>Abdul</td>
</tr>
<tr>
<td>Philip</td>
</tr>
<tr>
<td>Harding</td>
</tr>
<tr>
<td>Lee</td>
</tr>
<tr>
<td>Denton</td>
</tr>
<tr>
<td>Kevin</td>
</tr>
<tr>
<td>Rashad</td>
</tr>
<tr>
<td>Davis</td>
</tr>
<tr>
<td>Hasad</td>
</tr>
<tr>
<td>Nehru</td>
</tr>
<tr>
<td>Galvin</td>
</tr>
<tr>
<td>Isaiah</td>
</tr>
<tr>
<td>Fritz</td>
</tr>
<tr>
<td>Wallace</td>
</tr>
<tr>
<td>Barclay</td>
</tr>
<tr>
<td>Harding</td>
</tr>
<tr>
<td>Dieter</td>
</tr>
<tr>
<td>Emmanuel</td>
</tr>
<tr>
<td>Burke</td>
</tr>
<tr>
<td>Caesar</td>
</tr>
<tr>
<td>Randall</td>
</tr>
</tbody>
</table>
</div>

jQuery add class to last tbody in a loop after each thead

In html I have my markup is like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
I want to add a class for each last tbody after thead. So basically my output should be like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
</table>
I have tried this code but its not working at all.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextAll('tbody').last().addClass('last-row');
});

You can add that class to all tbody before thead and then add same class to last tbody
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
Demo
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
.last-row
{
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>rftg</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>

jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}
.section-table tbody.last-row{
background-color:#FF0;
}
.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Try prev('tbody'), since you don't have thead at the end, you need to add tbody:last-child as well.

You can first add the class to all the <tbody> that is just a previous element of the <thead>. Using this will leave you with the last <tbody> unchanged in the HTML table so you should add one more line of JQuery that will add class to this remaining last <tbody>.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody').last().addClass('last-row');
.last-row{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
<thead>
<tr>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
</tr>
</tbody>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>

You can use .nextUntil() to target all siblings till <THEAD> is encountered then use .last() to get the desired element and add class.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
.last-row {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>HEAD 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>

JQuery Accordion th

This should be any easy one for you. I want to have a table with rows that expand. I am trying to implement JQuery accordion on class="Accordion1".
it does not work at all.
What am I doing wrong?
...
<script>
$(function() {
$( "th.Accordion1").accordion();
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th colspan="2" class="Accordion1">GROUP 1</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
<tr>
<th colspan="2" class="Accordion1">GROUP 2</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
Thanks!

I believe you want to use the header option of jQuery Accordion.
$(function () {
$('table').accordion({header: '.accordion1' });
});
http://api.jqueryui.com/accordion/#option-header

I realize that this post is quite old but I have two different solutions for the problem stated and thought to post them anyway, maybe someone is thankful for it.
You can find two options on my Pen.
One including "Group 1" and "Group 2"...
<div class="options" id="op1">
<div class="accordion">
<h3>GROUP 1</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3>GROUP 2</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
And one without
<div class="options" id="op2">
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
Be aware that for this to work you have to include jquery and jquery-ui!
The options I've added for the accordion and the CSS are optional... ;)

How to retrive specific row from html table equal of something by jquery

I have a table dynamically generated by php. In this table have information for different semester (such as : first, second, third etc). Now i want to show specific semester information if user click a link from same table without a query. I am newbie in this forum and its my first question. sorry for poor english. !
My code
<table id="course_offering" class="table table-striped table-hover custab ">
<thead>
<tr>
<th>Course Code</th>
<th>Course title</th>
<th>Credit Hours</th>
<th>Contact Hours</th>
<th>Pre Requisite</th>
<th>Course Type</th>
<th>Year</th>
<th>Semester</th>
<th>Offering Year</th>
<th>Offering Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>1</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2015</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
</tbody>
</table>

here is a working example:
http://jsfiddle.net/K7PjR/1/
function getRowsByText(text) {
var resultRows = $();
$('tr').each(function () {
var row = $(this);
var rowText = row.text().trim();
if (rowText === text) {
resultRows = resultRows.add(row); //return the row
}
});
return resultRows;
}
getRowsByText('apple').css('color', 'red');
getRowsByText('orange').css('color', 'orange');
HTML:
<table>
<tr>
<td>apple</td>
</tr>
<tr>
<td>orange</td>
</tr>
<tr>
<td>bannana</td>
</tr>