要搜索的复选框值 table 以在值与行 ID 匹配时显示行

Question

我希望使用表单中的复选框来搜索下面的 table 并更新 CSS class 以便它们不再隐藏。尝试了几次都没有成功的功能。

希望获得有关如何构建 searchTable() 函数以循环遍历 table 并将复选框中的值与 tr id 值相匹配的帮助。

!更新!

我一直在尝试使用 Jquery toggle() 到 show/hide table 行，但没有成功，但希望我现在离得太远了。在商业设备上使用 vanilla 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() 功能，但您实际上可以使用 :checked 伪 class 和一般同级在纯 CSS 中完成此操作选择器 (~)，然后定位行。

看一看：

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";
  }
}```

要搜索的复选框值 table 以在值与行 ID 匹配时显示行

Checkbox value to search table to show row if value matches row ID

html

javascript

jquery

html-table

toggle