Question

我正在创建一个表，该表中的数据太多，我想放置select选项并对其进行过滤，我已经使用select在表中得到了过滤器，我的问题是如何不能手动向其中添加选项选择？例如，我有一个column的{{1}}，其中包含dates-5，01-12-19-2和01-13-19-{{1 }}所述日期必须是选项中的日期，并且应仅显示10，01-14-19，3（手动添加选项）之类的日期并不是最佳选择，因为日期列每天都在更新。

01-12-19

我希望使用javascript，这些选项会在可用日期之前自动填写，但即使有10个相同的日期，也只会在选项中显示为一个。

Answer 1

假设您只是尝试在其中的一列中填充select选项，然后在每次更改时过滤下表，类似的事情就会起作用。

const table = document.getElementById('myTable');
const trs = table.querySelectorAll('tbody tr');
const getAllDatesInTable = () => {
  const table = document.getElementById('myTable');
  const trs = table.querySelectorAll('tbody tr');
  const dates = [];
  trs.forEach( tr => {
    const date = tr.querySelector('td:last-child').innerText;
    if (!dates.includes(date)) {
      dates.push(date);
    }
  });
  
  return dates;
};

const dates = getAllDatesInTable();
const select = document.getElementById('dateFilter');
select.innerHTML = dates.map( d => `<option value=${d}>${d}</option>`);
select.onchange = (e) => {
  const selection = e.target.value;
  
  trs.forEach( tr => {
    tr.style.display = '';
    const date = tr.querySelector('td:last-child').innerText;
    if (date !== selection) {
      tr.style.display = 'none';
    }
  });
};

<select id="dateFilter">
  <option></option>
</select>
<table border="2" id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Dates</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>01-12-19</td>
    </tr>
    <tr>
      <td>Jas</td>
      <td>01-12-19</td>
    </tr>
    <tr>
      <td>sam</td>
      <td>01-12-19</td>
    </tr>
    <tr>
      <td>James</td>
      <td>01-12-19</td>
    </tr>
    <tr>
      <td>luke</td>
      <td>01-13-19</td>
    </tr>
    <tr>
      <td>lucas</td>
      <td>01-13-19</td>
    </tr>
    <tr>
      <td>laus</td>
      <td>01-13-19</td>
    </tr>
    <tr>
      <td>cals</td>
      <td>01-13-19</td>
    </tr>
    <tr>
      <td>miya</td>
      <td>01-14-19</td>
    </tr><tr>
      <td>lesley</td>
      <td>01-14-19</td>
    </tr>
  </tbody>
</table>

根据特定的列数据创建选择-使用javascript

1 个答案: