Фильтр для создания 2 таблицы по отфильтрованным данным из 1 таблицы

Question

у меня есть таблица с фильтрами по категориям и после есть фильтр по промежутку дат, но 2-й фильтр фильтрует абсолютно все данные, т.е. если я отфильтрую 1 таблицу и пользователь видит только 2 элемента таблицы из 10 что там были, то при использовании 2 фильтра мне нужно чтоб он фильтровал только эти 2 данных а не все элементы, помогите пожалуйста

Для удобства: https://codepen.io/kapets666/pen/VwROwWe

<!DOCTYPE html>
<html>
<head>
  <title>Фильтр заявок</title>
</head>
<body>
  <h2>Фильтр заявок</h2>

  <input type="text" id="mashine" placeholder="Введите номер станка">
  <input type="text" id="priority" placeholder="Введите приоритет заявки">
  <input type="text" id="plot" placeholder="Введите Участок">
  <button onclick="filterTable()">Фильтровать</button>
  
  <table  id="requests" border="1">
    <caption>Таблица заявок</caption>
    <tr>
      <th>Инвентарный номер станка</th>
      <th>Приоритет заявки</th>
      <th>Участок</th>
      <th>Дата создания заявки</th>
      <th>Дата закрытия заявки</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Красная</td>
      <td>1</td>
      <td>2024-01-01</td>
      <td>2024-05-01</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Красная</td>
      <td>1</td>
      <td>2024-01-01</td>
      <td>2024-05-01</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Зеленая</td>
        <td>5</td>
        <td>2024-01-01</td>
        <td>2024-05-02</td>
      </tr>
    <tr>
      <td>2</td>
      <td>Зеленая</td>
      <td>4</td>
      <td>2024-02-01</td>
      <td>2024-02-01</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Серая</td>
      <td>4</td>
      <td>2024-02-02</td>
      <td>2024-06-02</td>
    </tr>
  </table>
  <br>
  
  <label for="fromDate">От:</label>
  <input type="date" id="fromDate">
  <label for="toDate">До:</label>
  <input type="date" id="toDate">
  <button onclick="filterRequests()">Отфильтровать</button>
  <br><br>
  
  <table id="filteredRequests" border="1">
    <caption>Таблица отфильтрованных заявок</caption>
  </table>
</body>
<script src="main.js"></script>
</html>

function filterTable() {
  var inputMashine = document.getElementById("mashine").value.toUpperCase();
  var inputPriority = document.getElementById("priority").value.toUpperCase();
  var inputPlot = document.getElementById("plot").value.toUpperCase();
  var table = document.getElementById("requests");
  var tr = table.getElementsByTagName("tr");

  for (var i = 1; i < tr.length; i++) {
    var tdMashine = tr[i].getElementsByTagName("td")[0];
    var tdPriority = tr[i].getElementsByTagName("td")[1];
    var tdPlot = tr[i].getElementsByTagName("td")[2];
    if (tdMashine && tdPriority && tdPlot) {
      var mashine = tdMashine.textContent.toUpperCase();
      var priority = tdPriority.textContent.toUpperCase();
      var plot = tdPlot.textContent.toUpperCase();
      if (mashine.includes(inputMashine) && priority.includes(inputPriority) && plot.includes(inputPlot)) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}


function filterRequests() {
    var fromDate = document.getElementById("fromDate").value;
    var toDate = document.getElementById("toDate").value;
    var requests = document.getElementById("requests");
    var filteredRequests = document.getElementById("filteredRequests");
    
    var rows = requests.rows;
    var filteredRows = [];
    
    for (var i = 1; i < rows.length; i++) {
      var date = rows[i].cells[3].innerHTML;
      if (date >= fromDate && date <= toDate) {
        filteredRows.push(rows[i]);
      }
    }
    
    filteredRequests.innerHTML = '<tr><th>Дата</th><th>Вид заявки</th><th>Количество заявок</th></tr>';
    
    var counts = {};
    for (var i = 0; i < filteredRows.length; i++) {
      var date = filteredRows[i].cells[3].innerHTML;
      var requestType = filteredRows[i].cells[1].innerHTML;
      counts[date + requestType] = (counts[date + requestType] || 0) + 1;
    }
    
    for (var key in counts) {
      var date = key.substring(0, 10);
      var requestType = key.substring(10);
      filteredRequests.innerHTML += '<tr><td>' + date + '</td><td>' + requestType + '</td><td>' + counts[key] + '</td></tr>';
    }
  }

Answer 1

Попробуйте это:

function filterRequests() {
    var fromDate = document.getElementById("fromDate").value;
    var toDate = document.getElementById("toDate").value;
    var filteredTable = document.getElementById("requests");
    var filteredRows = filteredTable.querySelectorAll('tr[style=""]');
    var filteredRequests = document.getElementById("filteredRequests");

    var filteredAndDatedRows = [];

    for (var i = 0; i < filteredRows.length; i++) {
        var date = filteredRows[i].cells[3].innerHTML;
        if (date >= fromDate && date <= toDate) {
            filteredAndDatedRows.push(filteredRows[i]);
        }
    }

    filteredRequests.innerHTML = '<tr><th>Инвентарный номер станка</th><th>Приоритет заявки</th><th>Участок</th><th>Дата создания заявки</th><th>Дата закрытия заявки</th></tr>';

    for (var i = 0; i < filteredAndDatedRows.length; i++) {
        filteredRequests.innerHTML += filteredAndDatedRows[i].outerHTML;
    }
}

Answer 2

Я подправила код и все работает, как нужно

function filterTable() {
  var inputMashine = document.getElementById("mashine").value.toUpperCase();
  var inputPriority = document.getElementById("priority").value.toUpperCase();
  var inputPlot = document.getElementById("plot").value.toUpperCase();
  var table = document.getElementById("requests");
  var tr = table.getElementsByTagName("tr");

  for (var i = 1; i < tr.length; i++) {
    var tdMashine = tr[i].getElementsByTagName("td")[0];
    var tdPriority = tr[i].getElementsByTagName("td")[1];
    var tdPlot = tr[i].getElementsByTagName("td")[2];
    if (tdMashine && tdPriority && tdPlot) {
      var mashine = tdMashine.textContent.toUpperCase();
      var priority = tdPriority.textContent.toUpperCase();
      var plot = tdPlot.textContent.toUpperCase();
      if (mashine.includes(inputMashine) && priority.includes(inputPriority) && plot.includes(inputPlot)) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}


function filterRequests() {

    var inputMashine = document.getElementById("mashine").value.toUpperCase();
    var inputPriority = document.getElementById("priority").value.toUpperCase();
    var inputPlot = document.getElementById("plot").value.toUpperCase();
    var table = document.getElementById("requests");
    var tr = table.getElementsByTagName("tr");

    


    var fromDate = document.getElementById("fromDate").value;
    var toDate = document.getElementById("toDate").value;
    var requests = document.getElementById("requests");
    var filteredRequests = document.getElementById("filteredRequests");
    
    var rows = requests.rows;
    var filteredRows = [];

    var filteredRowsTwo = [];



    for (var i = 1; i < tr.length; i++) {
      var tdMashine = tr[i].getElementsByTagName("td")[0];
      var tdPriority = tr[i].getElementsByTagName("td")[1];
      var tdPlot = tr[i].getElementsByTagName("td")[2];
      if (tdMashine && tdPriority && tdPlot) {
        var mashine = tdMashine.textContent.toUpperCase();
        var priority = tdPriority.textContent.toUpperCase();
        var plot = tdPlot.textContent.toUpperCase();
        if (mashine.includes(inputMashine) && priority.includes(inputPriority) && plot.includes(inputPlot)) {
            filteredRowsTwo.push(rows[i]);
        } 
      }
    }
    
    for (var i = 0; i < filteredRowsTwo.length; i++) {
      var date = filteredRowsTwo[i].cells[3].innerHTML;
      if (date >= fromDate && date <= toDate) {
        filteredRows.push(filteredRowsTwo[i]);
      }
    }
    
    filteredRequests.innerHTML = '<tr><th>Дата</th><th>Вид заявки</th><th>Количество заявок</th></tr>';
    
    var counts = {};
    for (var i = 0; i < filteredRows.length; i++) {
      var date = filteredRows[i].cells[3].innerHTML;
      var requestType = filteredRows[i].cells[1].innerHTML;
      counts[date + requestType] = (counts[date + requestType] || 0) + 1;
    }
    
    for (var key in counts) {
      var date = key.substring(0, 10);
      var requestType = key.substring(10);
      filteredRequests.innerHTML += '<tr><td>' + date + '</td><td>' + requestType + '</td><td>' + counts[key] + '</td></tr>';
    }
  }

БЛОГ НА HUSL

Фильтр для создания 2 таблицы по отфильтрованным данным из 1 таблицы

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