Множественный фильтр с выпадающим списком с использованием `Javascript` в таблице HTML - PullRequest
Новая
       0

Множественный фильтр с выпадающим списком с использованием `Javascript` в таблице HTML

1 голос
/ 04 февраля 2020

У меня есть таблица HTML со строками и столбцами. Столбцы должны фильтроваться с использованием раскрывающихся значений.

В настоящее время код работает до 2 столбцов.

Рабочий сценарий 1: - Если я фильтрую по столбцу имени: JOHN.

Рабочий сценарий 2: - Если я фильтрую по столбцу имени: JOHN && Столбец страны ИНДИЯ .

, пожалуйста, помогите мне отфильтровать более 2 столбцов.

Не более 3 фильтров Пример: - если Имя == ДЖОН && Страна == ИНДИЯ && Возраст == 80

До 4 фильтров Пример: - если имя == ДЖОН && Страна == ИНДИЯ && Возраст == 80 && Зарплата == 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" />

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Вы можете использовать ниже настраиваемую функцию фильтра. Вы можете перебрать строку и найти подходящие значения. 

function myFunction(index,inputname) {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById(inputname);
  filter = input.value.toUpperCase();
  table = document.getElementById("empTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[index];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if(tr[i].style.display=="")
      {
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }       
  }
}
* {
  box-sizing: border-box;
}

#empTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#empTable th, #empTable td {
  text-align: left;
  padding: 12px;
}

#empTable tr {
  border-bottom: 1px solid #ddd;
}

#empTable tr.header, #empTable tr:hover {
  background-color: #f1f1f1;
}
<table id="empTable">
  <tr class="header">
    <th style="width:60%;"><input type="text" id="name" onkeyup="myFunction(0,'name')" placeholder="Search for names.." title="Type in a name"></th>
    <th style="width:40%;"><input type="text" id="country" onkeyup="myFunction(1,'country')" placeholder="Search for names.." title="Type in a name"></th>
       <th style="width:40%;"><input type="text" id="age" onkeyup="myFunction(2,'age')" placeholder="Search for names.." title="Type in a name"></th>
        <th style="width:40%;"><input type="text" id="salary" onkeyup="myFunction(3,'salary')" placeholder="Search for names.." title="Type in a name"></th>
     </tr>
     <tr>
    <th style="width:60%;">Name</th>
    <th style="width:40%;">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>
0 голосов
/ 04 февраля 2020

В общем oop давайте предположим, что мы хотели бы отобразить строку, а затем проверить, был ли применен какой-либо фильтр, а затем по одному на строку определим, будет ли он отображаться или нет. 

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" />
...