如何通过下拉列表中的输入过滤 html 中的表格？ [复制]答案

【问题标题】：How can I filter a table in html through a input in dropdown? [duplicate]如何通过下拉列表中的输入过滤 html 中的表格？ [复制]
【发布时间】：2020-07-07 22:26:53
【问题描述】：

我有一个 HTML 表单中的下拉列表和一个表格。我需要使用下拉列表过滤表格的外观。下拉列表有四个值。如果选择“全部”值，则表格应显示整个表格。否则，表格应根据下拉表格中选择的值显示内容。该表如下所示： enter image description here

这是代码：

#mytable {
  width: 100%;
  border-collapse: collapse;
}

.tr {
  background: #808080;
  color: white;
  font-weight: bold;
}

#mytable tb {
  padding: 5px;
  border: 1px solid black;
  text-align: left;
}

#optionsDiv {
  padding-bottom: 10px;
  font-weight: bold;
}

#selectField {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  height: 30px;
  width: 200px;
}

.odd {
  background: #ccffeb;
}

.even {
  background: #99FFD6;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="container" style="margin-top:150px;">
    <h1>Paleetu provides a variety of BPM related courses.</h1><br>
    <p> Please select a course from below dropdown</p>
    <select id="myfilter" onchange="myfunction()">
      <option value="all">All Course</option>
      <option value="pegacsa">Pega CSA</option>
      <option value="pegacssa">Pega CSSA</option>
      <option value="camunda">Camunda BPM</option>
    </select>
    <table id="mytable" class="table table-bordered">
      <tbody>
        <tr class="content">
          <th>Start</th>
          <th>End</th>
          <th>Time</th>
          <th>Course</th>
          <th>Price</th>
          <th>Credits</th>
          <th>Location</th>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>9:30AM to 12:30PM</td>
          <td>Pega CSA</td>
          <td>Rs. 14,000</td>
          <td>125</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Pega CSSA</td>
          <td>Rs. 14,000</td>
          <td>50</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Camunda BPM</td>
          <td>Rs. 14,000</td>
          <td>90</td>
          <td>Bengaluru</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

谁能帮我使用 js 或 jquery 的下拉值过滤表格。

【问题讨论】：

请阅读How to Ask。我们希望您自己先付出一些努力——至少您需要尝试一下。
@CBroe：当然。我很抱歉。这是我的第一个查询。

标签： javascript jquery html

【解决方案1】：

我将在代码中添加 cmets 来解释发生了什么。

let rows = Array.from(mytable.querySelectorAll('tr.content')); // An array that holds all the table rows
let cellMap = new Map(); // initialize a map 
rows.forEach(row => 
  cellMap.set(
    row, // which we will use to store the rows in as keys
    Array.from(row.querySelectorAll('td'))
      .map(td => td.textContent) // with the rows' table cell text contents as values
  )
);

// instead of using 'onchange'  always prefer to use addEventListener
myfilter.addEventListener('change', function() {
  if (this.value === 'all') { // if 'All' is selected
    rows.forEach(row => row.hidden = false); // unhide each row
    return;
  }
  // otherwise
  const searchTerm = this.selectedOptions[0].textContent; // extract the term we're looking for
  rows.forEach(row => { // iterate over the table rows
    // and for each row, decice whether it should be hidden or not
    row.hidden = !cellMap.get(row).includes(searchTerm); // based on if the searchterm occurs in the cellmap for that row
  })
});

#mytable {
  width: 100%;
  border-collapse: collapse;
}

.tr {
  background: #808080;
  color: white;
  font-weight: bold;
}

#mytable td {
  padding: 5px;
  border: 1px solid black;
  text-align: left;
}

#optionsDiv {
  padding-bottom: 10px;
  font-weight: bold;
}

#selectField {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  height: 30px;
  width: 200px;
}

.odd {
  background: #ccffeb;
}

.even {
  background: #99FFD6;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="container" style="margin-top:150px;">
    <h1>Paleetu provides a variety of BPM related courses.</h1><br>
    <p> Please select a course from below dropdown</p>
    <select id="myfilter">
      <option value="all">All Course</option>
      <option value="pegacsa">Pega CSA</option>
      <option value="pegacssa">Pega CSSA</option>
      <option value="camunda">Camunda BPM</option>
    </select>
    <table id="mytable" class="table table-bordered">
      <tbody>
        <tr class="content">
          <th>Start</th>
          <th>End</th>
          <th>Time</th>
          <th>Course</th>
          <th>Price</th>
          <th>Credits</th>
          <th>Location</th>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>9:30AM to 12:30PM</td>
          <td>Pega CSA</td>
          <td>Rs. 14,000</td>
          <td>125</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Pega CSSA</td>
          <td>Rs. 14,000</td>
          <td>50</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Camunda BPM</td>
          <td>Rs. 14,000</td>
          <td>90</td>
          <td>Bengaluru</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

【讨论】：