Поиск по нескольким таблицам на странице
Разбираюсь в js, пытаюсь сделать поиск по нескольким таблицам на странице, которые находятся на разных табах. Поиск по одной таблице работает. Ищет данные только в первой. Но если я хочу использовать querySelectorAll, чтобы учесть все таблицы поиск перестает работать вообще. Подскажите пожалуйста где ошибка, может я что-то забываю или вообще не то делаю
<div class="row">
<div class="tabs">
<a href="#" class="tab__link" onclick="openTab(event, 'workinghours')">Working Hours</a>
<a href="#" class="tab__link" onclick="openTab(event, 'seedschangtime')">Seeds Changing Time</a>
<a href="#" class="tab__link" onclick="openTab(event, 'statistics')">Statistics</a>
</div>
</div>
<div class="search">
<input id="searchInTable" type="search" class="table__search" placeholder="Search by date, employee name, seeds..." onkeyup="searchInTable()">
</div>
<div id="workinghours" class="tabcontent">
<div>
<table id="table" class="table">
<tr class = "table__row">
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
</th>
</tr>
<tr>
<td class="table__text">
Example 2
</td>
<td class="table__text">
Example 2
</td>
<td class="table__text">
Example 2
</td>
<td class="table__text">
Example 2
</td>
<td class="table__text">
Example 2
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
<tr>
<td class="table__text">
Example 3
</td>
<td class="table__text">
Example 3
</td>
<td class="table__text">
Example 3
</td>
<td class="table__text">
Example 3
</td>
<td class="table__text">
Example 3
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
</table>
</div>
</div>
<div id="seedschangtime" class="tabcontent">
<div>
<table id="table" class="table">
<tr class = "table__row">
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
</th>
</tr>
<tr>
<td class="table__text">
Example 4
</td>
<td class="table__text">
Example 4
</td>
<td class="table__text">
Example 4
</td>
<td class="table__text">
Example 4
</td>
<td class="table__text">
Example 4
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
<tr>
<td class="table__text">
Example 5
</td>
<td class="table__text">
Example 5
</td>
<td class="table__text">
Example 5
</td>
<td class="table__text">
Example 5
</td>
<td class="table__text">
Example 5
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
</table>
</div>
</div>
<div id="statistics" class="tabcontent">
<div>
<table id="table" class="table">
<tr class = "table__row">
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
<th class="table__heading">
Title
</th>
</tr>
<tr>
<td class="table__text">
Example 6
</td>
<td class="table__text">
Example 6
</td>
<td class="table__text">
Example 6
</td>
<td class="table__text">
Example 6
</td>
<td class="table__text">
Example 6
</td>
<td class="table__text">
Example 6
</td>
<td class="table__text">
Example 6
</td>
</tr>
</table>
</div>
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.tabs {
width: 100%;
max-width: 1170px;
margin: 40px 0 0 0px;
overflow: hidden;
position: relative;
border-bottom: 2px solid #E7EAEE;
}
.tab__link {
float: left;
display: block;
padding: 8px 9px;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #191D23;
text-align: center;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all .1s linear;
}
.tab__link:first-child {
padding-left: 0px;
}
.search {
width: 100%;
background: #F7F8F9;
border-radius: 4px;
padding: 12px;
margin: 32px 0;
gap: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.table__search {
width: 100%;
max-width: 425px;
padding: 8px;
gap: 8px;
font-weight: 400;
font-size: 15px;
line-height: 20px;
background: #fff;
color: #64748B;
border: 1px solid #E7EAEE;
border-radius: 4px;
}
.tabcontent {
display: none;
}
.table {
width: 100%;
max-width: 1170px;
border-spacing: 0px;
}
.table__heading {
font-weight: 600;
font-size: 14px;
line-height: 19px;
text-align: left;
text-transform: uppercase;
color: #64748B;
}
.table__text {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #191D23;
}
.table__edit {
text-align: center;
}
.btn {
height: 44px;
box-sizing: border-box;
border-radius: 4px;
color: #ffffff;
text-align: center;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
padding: 11px 24px;
}
.btn__green {
color: #fff;
background: #5B965D;
border: 1px solid #5b965d00;
cursor: pointer;
}
.edit__btn {
padding: 0 32px;
}
td {
text-align: left;
padding: 15px 15px;
border-bottom: 1px solid #E7EAEE;
border-collapse: collapse;
}
th {
padding: 20px 15px;
border-bottom: 1px solid #E7EAEE;
border-collapse: collapse;
}
tr:last-child td {
border-bottom: none;
}
input {
border: 1px solid #191D23;
border-radius: 4px;
padding: 8px 12px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #191D23;
gap: 4px;
}
js:
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tab__link" and remove the class "active"
tablinks = document.getElementsByClassName("tab__link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" tab__link--active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " tab__link--active";
}
function searchInTable () {
var input, filter, table, tr, td, i;
input = document.getElementById("searchInTable");
filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td") ;
for(j=0 ; j<td.length ; j++)
{
let tdata = td[j] ;
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break ;
} else {
tr[i].style.display = "none";
}
}
}
}
}
Ответы (2 шт):
Автор решения: Alexandr_Yakovlev
→ Ссылка
Как я понял вам нужно скрывать элементы с классом .table__text, если их содержимое не совпадает по поиску?
function searchInTable() {
const tableTexts = document.querySelectorAll(".table__text");
const input = document.querySelector(".table__search");
input.addEventListener("input", () => {
const inputVal = input.value.trim().toLowerCase();
tableTexts.forEach((item) => {
if (item) {
if (item.innerText.toLowerCase().search(inputVal) !== -1 || !inputVal.length) {
item.style.display = "";
} else {
item.style.display = "none";
}
}
});
});
}
searchInTable();
Автор решения: levietskaya
→ Ссылка
Немного изменив функцию в ответе, получила нужный результат. Благодарю за помощь
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tab__link" and remove the class "active"
tablinks = document.getElementsByClassName("tab__link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" tab__link--active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " tab__link--active";
}
function searchInTable () {
const input = document.querySelector(".table__search");
const tr = document.querySelectorAll(".table__row");
const tableTexts = document.querySelectorAll(".table__text");
input.addEventListener("input", () => {
const inputVal = input.value.trim().toLowerCase();
tr.forEach((item) => {
if (item) {
if (item.innerText.toLowerCase().search(inputVal) !== -1 || !inputVal.length) {
item.style.display = "";
} else {
item.style.display = "none";
}
}
});
});
}
searchInTable ().row {
display: flex;
flex-direction: row;
align-items: center;
}
.tabs {
width: 100%;
max-width: 1170px;
margin: 40px 0 0 0px;
overflow: hidden;
position: relative;
border-bottom: 2px solid #E7EAEE;
}
.tab__link {
float: left;
display: block;
padding: 8px 9px;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #191D23;
text-align: center;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all .1s linear;
}
.tab__link:first-child {
padding-left: 0px;
}
.search {
width: 100%;
background: #F7F8F9;
border-radius: 4px;
padding: 12px;
margin: 32px 0;
gap: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.table__search {
width: 100%;
max-width: 425px;
padding: 8px;
gap: 8px;
font-weight: 400;
font-size: 15px;
line-height: 20px;
background: #fff;
color: #64748B;
border: 1px solid #E7EAEE;
border-radius: 4px;
}
.tabcontent {
display: none;
}
.table {
width: 100%;
max-width: 1170px;
border-spacing: 0px;
}
.table__heading {
font-weight: 600;
font-size: 14px;
line-height: 19px;
text-align: left;
text-transform: uppercase;
color: #64748B;
}
.table__text {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #191D23;
}
.table__edit {
text-align: center;
}
.btn {
height: 44px;
box-sizing: border-box;
border-radius: 4px;
color: #ffffff;
text-align: center;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
padding: 11px 24px;
}
.btn__green {
color: #fff;
background: #5B965D;
border: 1px solid #5b965d00;
cursor: pointer;
}
.edit__btn {
padding: 0 32px;
}
td {
text-align: left;
padding: 15px 15px;
border-bottom: 1px solid #E7EAEE;
border-collapse: collapse;
}
th {
padding: 20px 15px;
border-bottom: 1px solid #E7EAEE;
border-collapse: collapse;
}
tr:last-child td {
border-bottom: none;
}
input {
border: 1px solid #191D23;
border-radius: 4px;
padding: 8px 12px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #191D23;
gap: 4px;
} <div class="row">
<div class="tabs">
<a href="#" class="tab__link" onclick="openTab(event, 'workinghours')">Working Hours</a>
<a href="#" class="tab__link" onclick="openTab(event, 'seedschangtime')">Seeds Changing Time</a>
<a href="#" class="tab__link" onclick="openTab(event, 'statistics')">Statistics</a>
</div>
</div>
<div class="search">
<input id="searchInTable" type="search" class="table__search" placeholder="Search by date, employee name, seeds..." onkeyup="">
</div>
<div id="workinghours" class="tabcontent">
<div>
<table id="table" class="table">
<tr class = "">
<th class="table__heading">
Employee
</th>
<th class="table__heading">
Date
</th>
<th class="table__heading">
Hours Total
</th>
<th class="table__heading">
Bags Total
</th>
<th class="table__heading">
Bags / Hour
</th>
<th class="table__heading">
</th>
</tr>
<tr class="table__row">
<td class="table__text">
Amanda
</td>
<td class="table__text">
02.07.2022
</td>
<td class="table__text">
7.3
</td>
<td class="table__text">
1
</td>
<td class="table__text">
1
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
<tr class="table__row">
<td class="table__text">
Kenya
</td>
<td class="table__text">
03.07.2022
</td>
<td class="table__text">
7.3
</td>
<td class="table__text">
1
</td>
<td class="table__text">
1
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
</table>
</div>
</div>
<div id="seedschangtime" class="tabcontent">
<div>
<table id="table" class="table">
<tr class = "">
<th class="table__heading">
Employee
</th>
<th class="table__heading">
Date
</th>
<th class="table__heading">
Seeds
</th>
<th class="table__heading">
Type
</th>
<th class="table__heading">
Changing Time
</th>
<th class="table__heading">
</th>
</tr>
<tr class="table__row">
<td class="table__text">
Amanda
</td>
<td class="table__text">
02.07.2022
</td>
<td class="table__text">
Broccoli
</td>
<td class="table__text">
Medium
</td>
<td class="table__text">
0:20
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
<tr class="table__row">
<td class="table__text">
Amanda
</td>
<td class="table__text">
02.07.2022
</td>
<td class="table__text">
Pepper
</td>
<td class="table__text">
Small
</td>
<td class="table__text">
0:20
</td>
<td class="table__text table__edit">
<button class = "btn btn__green edit__btn">Edit</button>
</td>
</tr>
</table>
</div>
</div>
<div id="statistics" class="tabcontent">
<div>
<table id="table" class="table">
<tr class = "table__row">
<th class="table__heading">
Employee
</th>
<th class="table__heading">
Rate/hour
</th>
<th class="table__heading">
Hours/week
</th>
<th class="table__heading">
Packets/day
</th>
<th class="table__heading">
Packets/hour
</th>
<th class="table__heading">
Min for 1 Packet
</th>
<th class="table__heading">
L.P. Cost
</th>
</tr>
<tr class="table__row">
<td class="table__text">
Amanda
</td>
<td class="table__text">
$13.5
</td>
<td class="table__text">
7.3
</td>
<td class="table__text">
3109.5
</td>
<td class="table__text">
415.99
</td>
<td class="table__text">
0.152
</td>
<td class="table__text">
$0.0325
</td>
</tr>
</table>
</div>
</div>