БЛОГ НА HUSL


Убрать лишние пробелы для innerHTML

Автор вопроса: levietskaya

У меня имеется несколько таблиц на разных табах. Я хочу сделать поиск по диапазону дат, которые будут вводится в инпуты. Поиск по одному значению работает, но если пытаюсь по примерам задать диапазон, то все ломается. Id для инпутов - daterangein и daterangeout. Мне нужно чтоб таблицы показывали только запсии подходящие по данному диапазону, а все остальные строки скрывались как в поиске по одному значению.

Скорее всего проблема в том, что при получении данных из ячеек с датами, выводится мног пробелов перед и после даты. Я пыталась их убрать с помощью trim() и replace(), однако выдает ошибку.

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

Ниже работающий код поиска по таблице и тот что по диапазону:

/*функция для работы вкладок*/
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";
  }
  /****************************************/
  
  
  /*функция для поиска по таблицам*/
const tableRow = document.querySelectorAll(".table__row");

function searchInTable () {
  const input = document.querySelector(".table__search");

  input.addEventListener("input", () => {
    const inputVal = input.value.trim().toLowerCase();

    tableRow.forEach((item) => {
          if (item) {
              if (item.innerText.toLowerCase().search(inputVal) !== -1 || !inputVal.length) {
                item.style.display = "";
              } else {
                item.style.display = "none";
              }
            }
        });
    });
}

searchInTable ()
/****************************************/
/*Удалить лишние пробелы*/
function delSpaces(str)
{
    str = str.replace(/\s/g, '');
    return str;
}
/****************************************/
/*Поиск по диапазону ---- не работает -- попадают все строки*/
function filterTable () {
  const filterBtn = document.querySelector('#filterBtn')
  const daterangein = document.querySelector('#daterangein').value;
  const daterangeout = document.querySelector('#daterangeout').value;
  
  filterBtn.addEventListener("click", () => {
    const dateOfWork = document.querySelectorAll('#dateOfWork');
    
    console.log(dateOfWork[0].innerHTML);
    console.log(dateOfWork[0].innerHTML.trim());
    
    tableRow.forEach((item) => {
      const dateOfWorkVal = dateOfWork.innerHTML;
      if (item) {
          if (dateOfWorkVal >= daterangein && dateOfWorkVal <= daterangeout) {
            item.style.display = "";
          } else {
            item.style.display = "none";
          }
        }
    });
    });
}
filterTable ()
/****************************************/



/***** Выпадающий список фильтров *****/
function dropdownFilter (){
  document.getElementById("dropdown").classList.toggle("show");
}
/********************************************************/
.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;
}
.filter {
    background: #fff; 
    border-radius: 4px;
    color: #64748B;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-align: center;  
    display: flex; 
}

.dropdown {
    position: relative;
    display: inline-block;
}


.dropdown__content {
    display: none;
    

    position: absolute;
    background-color: #F7F8F9;
    
    width: 100%;
    max-width: 250px;
    text-align: left;
    
    padding: 10px 22px 22px ;
    border: 1px solid #E7EAEE;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #E7EAEE;
    z-index: 2;
}

.show {
    display: block;
}

.filter__heading {
    font-size: 15px;
    font-weight: 400;
    padding: 18px 0 8px;
}

.filter__input {
    border: 1px solid #E7EAEE;
    max-width: 100px;
    margin: 0 10px 0 0;
    color: #64748B;
}
.dropdown__content > .btn   {
    margin: 15px 0;
}
<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 class="">
    <button class="btn filter dropdown" onclick="dropdownFilter()">  
        Filter
    </button>
    <div class="dropdown__content" id="dropdown">
        <h3 class="filter__heading">Date range:</h3>
        <div class="row">
            <input class="filter__input" placeholder="01.01.2022" id="daterangein">
            <input class="filter__input" placeholder="01.07.2022" id="daterangeout">
        </div> 
        <input id="filterBtn" type="button" class="btn btn__green" value="Filter">
    </div>
</div>
    </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" id="dateOfWork">
                        02.03.2022
                    </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" id="dateOfWork">
                        07.03.2022
                    </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" id="dateOfWork">
                        02.02.2022
                    </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" id="dateOfWork">
                        05.02.2022
                    </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" id="dateOfWork">
                        07.02.2022
                    </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>


Источник

Ответы (2 шт):

Автор решения: Dias

Надо брать отдельно ячейки дат и проверять. И множество id #dateOfWork так лучше не делать, в класс хотя бы вставить. И обычный поиск тоже не работает в примере. По вашему коду примерно так:

/*функция для работы вкладок*/
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";
  }
  /****************************************/
  
  
  /*функция для поиска по таблицам*/
const tableRow = document.querySelectorAll(".table tr:not(.table__row)");

function searchInTable () {
  const input = document.querySelector(".table__search");

  input.addEventListener("input", () => {
    const inputVal = input.value.trim().toLowerCase();

    tableRow.forEach((item) => {

          if (item) {
              if (item.innerText.toLowerCase().search(inputVal) !== -1 || !inputVal.length) {
                item.style.display = "";
              } else {
                item.style.display = "none";
              }
            }
        });
    });
}

searchInTable ()
/****************************************/


 

function filterTable () {
  const filterBtn = document.querySelector('#filterBtn')

 const tableTdDate = document.querySelectorAll(".table tr:not(.table__row) td:nth-child(2)");
  
  
  filterBtn.addEventListener("click", () => {

  const daterangein = document.querySelector('#daterangein').value;
  const daterangeout = document.querySelector('#daterangeout').value;
  
    tableTdDate.forEach((item) => {
        if (item.innerText.trim() >= daterangein && item.innerText.trim() <= daterangeout) {
        item.parentNode.style.display = "";
        } else {
        item.parentNode.style.display = "none";
        }
        
    });
    });
}


filterTable () 
/****************************************/



/***** Выпадающий список фильтров *****/
function dropdownFilter (){
  document.getElementById("dropdown").classList.toggle("show");
}
/********************************************************/
.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;
}
.filter {
    background: #fff; 
    border-radius: 4px;
    color: #64748B;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-align: center;  
    display: flex; 
}

.dropdown {
    position: relative;
    display: inline-block;
}


.dropdown__content {
    display: none;
    

    position: absolute;
    background-color: #F7F8F9;
    
    width: 100%;
    max-width: 250px;
    text-align: left;
    
    padding: 10px 22px 22px ;
    border: 1px solid #E7EAEE;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #E7EAEE;
    z-index: 2;
}

.show {
    display: block;
}

.filter__heading {
    font-size: 15px;
    font-weight: 400;
    padding: 18px 0 8px;
}

.filter__input {
    border: 1px solid #E7EAEE;
    max-width: 100px;
    margin: 0 10px 0 0;
    color: #64748B;
}
.dropdown__content > .btn   {
    margin: 15px 0;
}
<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 class="">
    <button class="btn filter dropdown" onclick="dropdownFilter()">  
        Filter
    </button>
    <div class="dropdown__content" id="dropdown">
        <h3 class="filter__heading">Date range:</h3>
        <div class="row">
            <input class="filter__input" placeholder="01.01.2022" id="daterangein">
            <input class="filter__input" placeholder="01.07.2022" id="daterangeout">
        </div> 
        <input id="filterBtn" type="button" class="btn btn__green" value="Filter">
    </div>
</div>
    </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">
                        02.03.2022
                    </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">
                        07.03.2022
                    </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">
                        02.02.2022
                    </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">
                        05.02.2022
                    </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">
                        07.02.2022
                    </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>

→ Ссылка
Автор решения: levietskaya

Одно небольшое изменение и все заработало!

function filterTable () {
  const filterBtn = document.querySelector('#filterBtn')

 const tableTdDate = document.querySelectorAll(".table td:nth-child(2)");
  
  
  filterBtn.addEventListener("click", () => {

  const daterangein = document.querySelector('#daterangein').value;
  const daterangeout = document.querySelector('#daterangeout').value;
  
    tableTdDate.forEach((item) => {
        if (item.innerText.trim() >= daterangein && item.innerText.trim() <= daterangeout) {
        item.parentNode.style.display = "";
        } else {
        item.parentNode.style.display = "none";
        }
        
    });
    });
}
→ Ссылка

licensed under cc by-sa 3.0 with attribution.