如果值与行 ID 匹配，则搜索表的复选框值以显示行

Question

我希望使用表单中的复选框来搜索下表并更新 CSS 类，以便它们不再被隐藏。已经尝试了几次没有运气的功能。

希望有关如何构造 searchTable() 函数以循环遍历表并将复选框中的值与 tr id 值匹配的一些帮助。

！更新！

我一直在尝试使用 Jquery toggle() 来显示/隐藏表格行，但没有成功，但希望我现在不会太远。在商业设备上使用原生 HTML、CSS 和 JS 作为“工作项目”。

<script>$(document).ready(function(){
  $('input[type="checkbox"]').click(function(){
      var inputValue = $(this).attr("value");
      $("#" + inputValue).toggle();
  });
});</script>

<label><input type="checkbox" name="systems" id="system1" value="B">B</label>
  <label><input type="checkbox" name="systems" id="system2" value="C">C</label>
  <label><input type="checkbox" name="systems" id="system3" value="BII">BII</label>

    <tbody id="myTable">
    <tr class="hidden" id="B">  
      <td>B</td>
      <td>Tran</td>
      <td>skill-1, skill-2, skill-3</td>
      <td>skill-1, skill-2</td>
      <td>skill-1</td>
      <td> 
        <select name="levels" id="levels">
        <option value="level1">Level 1</option>
        <option value="level2">Level 2</option>
        <option value="level3">Level 3</option>
        </select> 
      </td>
    </tr> <tr class="hidden" id="BII">  
      <td>BII</td>
      <td>Tran</td>
      <td>skill-1, skill-2, Skill-3</td>
      <td>skill-1, skill-2</td>
      <td>skill-1</td>
      <td> 
        <select name="levels" id="levels">
        <option value="level1">Level 1</option>
        <option value="level2">Level 2</option>
        <option value="level3">Level 3</option>
        </select> 
      </td>
    </tr> <tr class="hidden" id="C">  
      <td>C</td>
      <td>Auth</td>
      <td>skill-1,skill-2,Skill-3</td>
      <td>skill-1,skill-2</td>
      <td>skill-1</td>
      <td> 
        <select name="levels" id="levels">
        <option value="level1">Level 1</option>
        <option value="level2">Level 2</option>
        <option value="level3">Level 3</option>
        </select> 
      </td>
    </tr> </tbody>

Answer 1

我不知道有任何 searchTable() 函数，但您实际上可以在纯 CSS 中使用 :checked 伪类和通用同级选择器 (~) 并定位行来完成此操作。

看看：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table th, table td {
  padding: 5px 10px;
}
table th input, table th select, table td input, table td select {
  margin: -5px -10px;
  padding: 5px 10px;
  border: none;
  font: inherit;
}
[name="systems"] ~ #myTable tr[id] {
  display: none;
}
[name="systems"]#system1:checked ~ #myTable tr#B,
[name="systems"]#system2:checked ~ #myTable tr#C,
[name="systems"]#system3:checked ~ #myTable tr#BII {
  display: table-row;
}

<input type="checkbox" name="systems" id="system1" value="B"> <label for="system1">BNS</label>
<input type="checkbox" name="systems" id="system2" value="C"> <label for="system2">CMAS</label>
<input type="checkbox" name="systems" id="system3" value="BII"> <label for="system3">Base II</label>
<table id="myTable">
  <tbody>
    <tr id="B">
      <td>B</td>
      <td>Tran</td>
      <td>skill-1, skill-2, skill-3</td>
      <td>skill-1, skill-2</td>
      <td>skill-1</td>
      <td>
        <select name="levels" id="levels">
          <option value="level1">Level 1</option>
          <option value="level2">Level 2</option>
          <option value="level3">Level 3</option>
        </select>
      </td>
    </tr>
    <tr id="BII">
      <td>BII</td>
      <td>Tran</td>
      <td>skill-1, skill-2, Skill-3</td>
      <td>skill-1, skill-2</td>
      <td>skill-1</td>
      <td>
        <select name="levels" id="levels">
          <option value="level1">Level 1</option>
          <option value="level2">Level 2</option>
          <option value="level3">Level 3</option>
        </select>
      </td>
    </tr>
    <tr id="C">
      <td>C</td>
      <td>Auth</td>
      <td>skill-1,skill-2,Skill-3</td>
      <td>skill-1,skill-2</td>
      <td>skill-1</td>
      <td>
        <select name="levels" id="levels">
          <option value="level1">Level 1</option>
          <option value="level2">Level 2</option>
          <option value="level3">Level 3</option>
        </select>
      </td>
    </tr>
  </tbody>
<table>

我希望这会有所帮助！如果您有任何问题，请告诉我。干杯！

Answer 2

设法让它在下面工作。

<label><input type="checkbox" name="systems" id="B1" value="B" onclick="showTable()">B</label>

```function showTable() {
  var x = document.getElementById("B");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}```