Question

在我的HTML中，我有一个包含三列A，B，C的列表/表。
我有三个复选框过滤器X，Y，Z列表。

我需要的
如果我使用过滤器列表X，那么它将过滤列A。
如果我使用过滤器列表X和Y，则仅应显示出现在A AND B中的值。

Answer 1

您的问题尚不清楚，但我会尽力提供帮助。

如果选中了复选框X和Y，这是一种过滤表以仅显示A和B匹配的条目的方法。

Change事件侦听器附加到复选框，以在检测到更改时更新表。

const X = document.querySelector('#X');
const Y = document.querySelector('#Y');
const Z = document.querySelector('#Z');
const table = document.querySelector('#table-body');

const data = [
  { A: 1, B: 1, C: 9 },
  { A: 2, B: 2, C: 3 },
  { A: 1, B: 2, C: 5 },
  { A: 3, B: 3, C: 3 },
  { A: 7, B: 6, C: 8 },
  { A: 4, B: 5, C: 6 }
];

X.addEventListener('change', update);
Y.addEventListener('change', update);
Z.addEventListener('change', update);

function update() {
  const x = X.checked;
  const y = Y.checked;
  const z = Z.checked;
  let filtered = data;
  if (x && y) {
    filtered = data.filter(({ A, B, C }) => A === B);
  }
  drawTable(filtered);
}

function drawTable(data) {
  const rows = data.map(d => {
    return `<tr><td>${d.A}</td><td>${d.B}</td><td>${d.C}</td></tr>`;
  });
  table.innerHTML = rows.join('');
}

update();

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
}

<label for="X">X<input type="checkbox" id="X" checked></label>
<label for="Y">Y<input type="checkbox" id="Y"></label>
<label for="Z">Z<input type="checkbox" id="Z"></label>
<br>
<br>
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
</table>

如何在JavaScript中对表使用AND的多个过滤器

1 个答案: