**我有一个HTML表格，表格上方有供使用者使用的核取方块选项。**当使用者核取方块时，这些栏会显示在表格上

HTML格式

<div class="col-xl-3 col-md-4">
 <div class="icon-box">
  <h3>Color of Fish</h3>
  <li class="listPrint"><input type="checkbox" value="hide" id="red" onchange="hide_show_table(this.id);"> Red</li>
  <li class="listPrint"><input type="checkbox" value="hide" id="blue" onchange="hide_show_table(this.id);"> Blue</li>
  <li class="listPrint"><input type="checkbox" value="hide" id="yellow" onchange="hide_show_table(this.id);"> Yellow</li>
 </div>
</div>

<table id="table2" class="mx-auto mb-5" width="100%">
 <thead>
   <tr>
     <th>Fish</th>
     <th id="red_head">Red</th>
     <th id="blue_head">Blue</th>
     <th id="yellow_head">Yellow</th>
   </tr>
 </thead>

 <tbody>
    <tr class="tableRow">
      <td class="fish"><a href="#"><div>Bluefin</div></a></td>
      <td class="red"></td>
      <td class="blue"><i class="fa-solid fa-check"></td>
      <td class="yellow"></td>
    </tr>

    <tr class="tableRow">
      <td class="fish"><a href="#"><div>Redtail</div></a></td>
      <td class="red"><i class="fa-solid fa-check"></td>
      <td class="blue"></td>
      <td class="yellow"></td>
    </tr>

    <tr class="tableRow">
      <td class="fish"><a href="#"><div>Rainbow</div></a></td>
      <td class="red"><i class="fa-solid fa-check"></td>
      <td class="blue"><i class="fa-solid fa-check"></td>
      <td class="yellow"><i class="fa-solid fa-check"></td>
    </tr>

 </tbody>
</table>

JS

/////////////check boxes//////////////
function hide_show_table(col_name)
{
 var checkbox_val=document.getElementById(col_name).value;
 if(checkbox_val=="show")
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="none";
  }
  document.getElementById(col_name+"_head").style.display="none";
  document.getElementById(col_name).value="hide";
 }
 else
 {
  var all_col=document.getElementsByClassName(col_name);

  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="table-cell";
  }
  document.getElementById(col_name+"_head").style.display="table-cell";
  document.getElementById(col_name).value="show";
 }
}

CSS格式

# red_head {

  display: none;
}
.red {
  display: none;
}

# blue_head {

  display: none;
}
.blue {
  display: none;
}

# yellow_head {

  display: none;
}
.yellow {
  display: none;
}

我想隐藏（）具有任何“td：empty”的行****例如：打开时，显示鱼列和数据。当用户检查颜色时，显示这些列。同时，如果鱼没有该颜色...则隐藏这些行。
我已经尝试过javascript循环...现在我已经尝试过Jquery。我似乎更接近于在Jquery中获得它：

if($('tr:has("td:empty")')) {
  if("td:empty") {
    $(this).closest("tr").hide();
    } else {
      $(this).closest("tr").show();
    }
  }

如果我在打开时隐藏fish列，它会起到我想要的作用。它会隐藏所有单元格均为空的行。但是，我会尝试隐藏所有单元格均为空的行，并保留匹配的fish****我也尝试过

$('tr:has("td:empty")).hide();

**但是，没有显示任何值...”