javascript - 在 HTML 表中使用 `Javascript` 的带有下拉菜单的多个过滤器

Question

我有一个包含行和列的 HTML 表格。需要使用下拉值来过滤列。

目前代码最多可运行 2 列。

工作场景 1:- 如果我按名称列过滤:JOHN。

工作场景 2:- 如果我按名称列过滤:JOHN && 国家列 印度。

请帮我过滤超过 2 列的内容。

最多 3 个过滤器，例如:- if Name == JOHN && Country == INDIA && Age == 80

最多 4 个过滤器，例如:- if Name == JOHN && Country == INDIA && Age == 80 && Salary == 3000

function SearchData() {

  var name = document.getElementById("idName").value.toUpperCase();
  var country = document.getElementById("idCountry").value.toUpperCase();
  var age = document.getElementById("idAge").value.toUpperCase();
  var salary = document.getElementById("idSalary").value.toUpperCase();

  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {

    var rowName = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase();
    var rowCountry = tr[i].getElementsByTagName("td")[1].textContent.toUpperCase();
    var rowAge = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
    var rowSalary = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();

    if (name != 'ALL' && country != 'ALL') {
      if (rowName == name && rowCountry == country) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } else if (rowName != '' || rowCountry != '') {
      if (name != 'ALL') {
        if (rowName == name) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
      if (country != 'ALL') {
        if (rowCountry == country) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }

  }
}

<table id="myTable" border="1">
  <tr>
    <th>Name</th>
    <th>country</th>
    <th>Age</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>USA</td>
    <td>50</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>UK</td>
    <td>50</td>
    <td>2000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>80</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>sam</td>
    <td>AUSTRALIA</td>
    <td>80</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>joe</td>
    <td>INDIA</td>
    <td>60</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Australia</td>
    <td>90</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>alan</td>
    <td>USA</td>
    <td>60</td>
    <td>6000</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>USA</td>
    <td>50</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>UK</td>
    <td>50</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>80</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>sam</td>
    <td>AUSTRALIA</td>
    <td>80</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>90</td>
    <td>3000</td>
  </tr>
</table>

<select id="idName">
  <option value="all">Select Name</option>
  <option value="Jill">Jill</option>
  <option value="Eve">Eve</option>
  <option value="John">John</option>
  <option value="sam">sam</option>
  <option value="joe">joe</option>
  <option value="alan">alan</option>
</select>

<select id="idCountry">
  <option value="all">Select Country</option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
  <option value="INDIA">INDIA</option>
  <option value="AUSTRALIA">AUSTRALIA</option>
</select>

<select id="idAge">
  <option value="all">Select Age</option>
  <option value="50">50</option>
  <option value="60">60</option>
  <option value="80">80</option>
  <option value="90">90</option>
</select>

<select id="idSalary">
  <option value="all">Select Salary</option>
  <option value="1000">1000</option>
  <option value="2000">2000</option>
  <option value="3000">3000</option>
  <option value="4000">4000</option>
  <option value="5000">5000</option>
  <option value="6000">6000</option>
</select>

<input type="button" onclick="SearchData();" value="Submit" />

Answer 1

在一个循环中，假设我们想要显示一行，然后检查是否应用了任何过滤器，然后每行一个决定是否显示它。

const table = document.getElementById("myTable");
// save all tr
const tr = table.getElementsByTagName("tr");

function SearchData() {

  var name = document.getElementById("idName").value.toUpperCase();
  var country = document.getElementById("idCountry").value.toUpperCase();
  var age = document.getElementById("idAge").value.toUpperCase();
  var salary = document.getElementById("idSalary").value.toUpperCase();

  for (i = 1; i < tr.length; i++) {

    var rowName = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase();
    var rowCountry = tr[i].getElementsByTagName("td")[1].textContent.toUpperCase();
    var rowAge = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
    var rowSalary = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();

    var isDiplay = true;

    if (name != 'ALL' && rowName != name) {
      isDiplay = false;
    }
    if (country != 'ALL' && rowCountry != country) {
      isDiplay = false;
    }
    if (age != 'ALL' && rowAge != age) {
      isDiplay = false;
    }
    if (salary != 'ALL' && rowSalary != salary) {
      isDiplay = false;
    }
    
    if (isDiplay) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }


  }
}

<table id="myTable" border="1">
  <tr>
    <th>Name</th>
    <th>country</th>
    <th>Age</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>USA</td>
    <td>50</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>UK</td>
    <td>50</td>
    <td>2000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>80</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>sam</td>
    <td>AUSTRALIA</td>
    <td>80</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>joe</td>
    <td>INDIA</td>
    <td>60</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Australia</td>
    <td>90</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>alan</td>
    <td>USA</td>
    <td>60</td>
    <td>6000</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>USA</td>
    <td>50</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>UK</td>
    <td>50</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>80</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>sam</td>
    <td>AUSTRALIA</td>
    <td>80</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>INDIA</td>
    <td>90</td>
    <td>3000</td>
  </tr>
</table>

<select id="idName">
  <option value="all">Select Name</option>
  <option value="Jill">Jill</option>
  <option value="Eve">Eve</option>
  <option value="John">John</option>
  <option value="sam">sam</option>
  <option value="joe">joe</option>
  <option value="alan">alan</option>
</select>

<select id="idCountry">
  <option value="all">Select Country</option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
  <option value="INDIA">INDIA</option>
  <option value="AUSTRALIA">AUSTRALIA</option>
</select>

<select id="idAge">
  <option value="all">Select Age</option>
  <option value="50">50</option>
  <option value="60">60</option>
  <option value="80">80</option>
  <option value="90">90</option>
</select>

<select id="idSalary">
  <option value="all">Select Salary</option>
  <option value="1000">1000</option>
  <option value="2000">2000</option>
  <option value="3000">3000</option>
  <option value="4000">4000</option>
  <option value="5000">5000</option>
  <option value="6000">6000</option>
</select>

<input type="button" onclick="SearchData();" value="Submit" />