JS/JQuery 如何使用类别过滤器隐藏 n 表行

【问题标题】：JS/JQuery how to hide n table rows with category filterJS/JQuery 如何使用类别过滤器隐藏 n 表行
【发布时间】：2020-11-16 05:40:55
【问题描述】：

我有一个表格，可以使用复选框按类别隐藏结果。我正在尝试考虑如何使用下拉菜单和切片功能隐藏其他结果（例如，仅显示每个类别的前 10、15、25...），但我不清楚我应该如何去做这是他们当前设置代码的方式。目标是仅显示每个 selected 集群的前 n 个结果。任何帮助将不胜感激。

这是我的代码：

// 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>

【问题讨论】：

    标签： javascript jquery frontend


    【解决方案1】：

    您可以利用 jQuery 的 has() 和 .filter() 来查找第一个 &lt;td&gt; 包含给定数字的 &lt;tr&gt;s，.slice() 该数组以获取给定索引之后的数组，以及 @987654327 @ 他们。 （见https://stackoverflow.com/a/13528895/378779.）

    最简单的方法是创建一个函数（我将其命名为doUpdate()）来完成所有显示/隐藏。这样，您可以在任何复选框被选中或下拉列表更改时调用它。

    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();
}

    这还需要对您的“全选”复选框进行细微修改：

    <input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll(this)" checked/> select all

    【讨论】：

    • 感谢您的帮助，但我有点困惑，为什么当下拉列表嵌套在.change(function() { 中时解决方案不起作用。这是我写的第一个 javascript，所以有很多概念对我来说是陌生的。
    • 它仅嵌套在复选框的 .change() 函数中，而不是下拉列表。下拉菜单需要自己的.change() 处理程序，它查看每个复选框的状态并显示/隐藏相应的&lt;tr&gt;。
    • @Danny 我已经修改了我的答案，因此它可以正常工作，包括当您选中“全选”框并更改“每个集群的 n 个基因”下拉菜单时。
    猜你喜欢
    • 1970-01-01
    • 2017-01-05
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode