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

Question

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

希望在如何构造searchTable()函数以循环表并将复选框中的值与tr id值匹配方面获得一些帮助。

！更新！

我一直试图使用()来显示/隐藏表行，但没有运气，但希望我现在不太远。在业务设备上使用普通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伪类和普通同胞选择器(~)在纯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() {

变量x= document.getElementById("B")；

if (x.style.display === "none") {

x.style.display = "block";

}否则{

x.style.display = "none";

}

}`