选中多个复选框以过滤匹配每个输入标签文本的 table 行

Question

在下面的代码片段中，一次选中一个复选框效果很好，但选中多个复选框时效果不佳。我猜想当我选中多个复选框时，例如 White 和 Orange，该函数正在查找列单元格中的 WhiteOrange，显然没有结果。如何逐一检查每个标签文本以获得所有匹配结果？

此外，如何在更改函数之前检查复选框的初始状态，以便在加载页面时仅显示 White 的结果？我试过运行在 change 函数之前的 for 循环中的 filter 函数，但它根本不起作用。

感谢您的帮助；非常感谢！

$(function() {
  const focusInputs = document.querySelectorAll("input.focusbox");
  const focusColumns4 = document.querySelectorAll("table#colors tbody tr td.table-cell:nth-child(4)");
  for (const focusInput of focusInputs) {
    $(focusInput).on('change', function() {
      if (!$(focusInput).is(":checked")) {
        $(focusColumns4).parent('tr').show();
      } else if ($(focusInput).is(":checked")) {
        $(focusColumns4).filter(function() {
          return $(this).text() !== $(focusInput).parent().text();
        }).parent('tr').hide();
      }
    });
  }
});

body {
  font-size: 10px;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

table#colors {
  margin-top: 5px;
}

table#colors tbody tr td.entry2 {
  width: 200px;
}

.cf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  -webkit-transition: border-radius 1s, width 1s, height 1s;
  transition: border-radius 1s, width 1s, height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
  <li><label class="focusbox-label"><input class="focusbox" type="checkbox" checked />White</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Red</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr class="head-row">
      <th class="table-cell cYellow c1 entry1">Color</th>
      <th class="table-cell cYellow c1 entry2">Name</th>
      <th class="table-cell cYellow c1 entry3">HTML Color Code</th>
      <th class="table-cell cYellow c1 entry4">Shade Group</th>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FFFFFF;"></div>
      </td>
      <td class="table-cell entry2">White</td>
      <td class="table-cell entry3">#FFFFFF</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #F7E7CE;"></div>
      </td>
      <td class="table-cell entry2">Champagne</td>
      <td class="table-cell entry3">#F7E7CE</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED2839;"></div>
      </td>
      <td class="table-cell entry2">Red (Pantone)</td>
      <td class="table-cell entry3">#ED2839</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED1B24;"></div>
      </td>
      <td class="table-cell entry2">Red (CMYK) (pigment red)</td>
      <td class="table-cell entry3">#ED1B24</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8200;"></div>
      </td>
      <td class="table-cell entry2">UT orange</td>
      <td class="table-cell entry3">#FF8200</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8000;"></div>
      </td>
      <td class="table-cell entry2">Orange (wheel)</td>
      <td class="table-cell entry3">#FF8000</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
  </tbody>
</table>

Answer 1

请注意确定 jQuery 和 javascript 之间的混合原因，但请尝试以下方式：

$(function() {
  const focusInputs = $("input.focusbox");

  focusInputs.change(function() {
    var checked = focusInputs.filter(function() {
      return $(this).is(":checked")
    })
    var colors = checked.map(function() {
      return $(this).parent().text()
    }).get()

    if (colors.length == 0) {
      $('#colors tr').show();
    } else {
      $('#colors tr').hide();
      $('#colors tr').filter(function() {
        return $.inArray($(this).find(".entry4").text(), colors) > -1
      }).show();
    }

  });
});

演示

$(function() {
  const focusInputs = $("input.focusbox");

  focusInputs.change(function() {
    var checked = focusInputs.filter(function() {
      return $(this).is(":checked")
    })
    var colors = checked.map(function() {
      return $(this).parent().text()
    }).get()

    if (colors.length == 0) {
      $('#colors tr').show();
    } else {
      $('#colors tr').hide();
      $('#colors tr').filter(function() {
        return $.inArray($(this).find(".entry4").text(), colors) > -1
      }).show();
    }

  });
});

body {
  font-size: 10px;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

table#colors {
  margin-top: 5px;
}

table#colors tbody tr td.entry2 {
  width: 200px;
}

.cf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  -webkit-transition: border-radius 1s, width 1s, height 1s;
  transition: border-radius 1s, width 1s, height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
  <li><label class="focusbox-label"><input class="focusbox" type="checkbox" checked />White</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Red</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr class="head-row">
      <th class="table-cell cYellow c1 entry1">Color</th>
      <th class="table-cell cYellow c1 entry2">Name</th>
      <th class="table-cell cYellow c1 entry3">HTML Color Code</th>
      <th class="table-cell cYellow c1 entry4">Shade Group</th>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FFFFFF;"></div>
      </td>
      <td class="table-cell entry2">White</td>
      <td class="table-cell entry3">#FFFFFF</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #F7E7CE;"></div>
      </td>
      <td class="table-cell entry2">Champagne</td>
      <td class="table-cell entry3">#F7E7CE</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED2839;"></div>
      </td>
      <td class="table-cell entry2">Red (Pantone)</td>
      <td class="table-cell entry3">#ED2839</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED1B24;"></div>
      </td>
      <td class="table-cell entry2">Red (CMYK) (pigment red)</td>
      <td class="table-cell entry3">#ED1B24</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8200;"></div>
      </td>
      <td class="table-cell entry2">UT orange</td>
      <td class="table-cell entry3">#FF8200</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8000;"></div>
      </td>
      <td class="table-cell entry2">Orange (wheel)</td>
      <td class="table-cell entry3">#FF8000</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
  </tbody>
</table>

Answer 2

您的代码是 jQuery 和本机 JS 的相当奇怪的组合。 focusColumns4 的使用还假定它与选中框的颜色相关，而实际上它包含所有行，无论在 DOM 中的位置如何，或与触发 change事件。

通过将复选框的 value 设置为要在 DOM 中查找的颜色值，可以更简单地实现您想要做的事情。然后，您可以构建一个检查值数组，并根据需要将其用于 hide/show 和 tr。

$(function() {
  let $focusInput = $('input.focusbox');
  let $focusRows = $('table#colors tbody tr');
  
  let setRowStates = () => {
    $focusRows.hide();
    let values = $focusInput.filter(':checked').map((i, el) => el.value).get();   
    values.forEach(colour => $focusRows.filter(`:has(.entry4:contains('${colour}'))`).show());
  };
  
  $focusInput.on('change', setRowStates).trigger('change'); 
});

body {
  font-size: 10px;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

table#colors {
  margin-top: 5px;
}

table#colors tbody tr td.entry2 {
  width: 200px;
}

.cf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  -webkit-transition: border-radius 1s, width 1s, height 1s;
  transition: border-radius 1s, width 1s, height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
  <li><label class="focusbox-label"><input class="focusbox" type="checkbox" value="White" checked />White</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" value="Red" />Red</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" value="Orange" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr class="head-row">
      <th class="table-cell cYellow c1 entry1">Color</th>
      <th class="table-cell cYellow c1 entry2">Name</th>
      <th class="table-cell cYellow c1 entry3">HTML Color Code</th>
      <th class="table-cell cYellow c1 entry4">Shade Group</th>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FFFFFF;"></div>
      </td>
      <td class="table-cell entry2">White</td>
      <td class="table-cell entry3">#FFFFFF</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #F7E7CE;"></div>
      </td>
      <td class="table-cell entry2">Champagne</td>
      <td class="table-cell entry3">#F7E7CE</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED2839;"></div>
      </td>
      <td class="table-cell entry2">Red (Pantone)</td>
      <td class="table-cell entry3">#ED2839</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED1B24;"></div>
      </td>
      <td class="table-cell entry2">Red (CMYK) (pigment red)</td>
      <td class="table-cell entry3">#ED1B24</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8200;"></div>
      </td>
      <td class="table-cell entry2">UT orange</td>
      <td class="table-cell entry3">#FF8200</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8000;"></div>
      </td>
      <td class="table-cell entry2">Orange (wheel)</td>
      <td class="table-cell entry3">#FF8000</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
  </tbody>
</table>

选中多个复选框以过滤匹配每个输入标签文本的 table 行

Check multiple Checkboxes to filter table rows matching each input label text

checkbox

jquery

filter