Блог

Я пытаюсь использовать следующий скрипт, чтобы позволить пользователю фильтровать строки в таблице на основе введенного им значения. Они могут обновить эту строку, после того как произойдет событие обновления, страница будет обновлена / обновлена, и на странице снова будут показаны все строки. Я пытаюсь найти способ сохранить строки, которые они отфильтровали после обновления / перезагрузки. Другими словами, как будто обновления никогда не происходило.

 I get the following error: Uncaught TypeError: value.toUpperCase is not a function
    at filterTable (accounts.php:1270)
    at HTMLInputElement.<anonymous> (accounts.php:1291)
    at HTMLInputElement.<anonymous>
  

Это код;

   <table class="userprof" align='left'>
    <tr>
      <td class="footer">Filter:
        <input type="text" id="myInput" name="filter" style="color:black !important;" placeholder="Filter table" />
      </td>
    </tr>
  </table>
</p><br /><br /><br />
    

    
</head>


    <table width="99%" id="myTable" class="sortable" >
    <tr>
 
    <td class="header" style="padding: 1px;">Name</td>
    <td class="header">Email</td></tr>
 
 
<?  //Selecteer accounts.
  

  $stmt = $mysqli->prepare("SELECT * FROM account WHERE purpose= ?");
  $stmt->bind_param("s", $status);
  $stmt->execute();
  $result = $stmt->get_result(); 
}
 while ($row = $result->fetch_assoc()) { 

  
    <td style="color:<?= htmlspecialchars($cat_color) ?> ", class="footer"><?= htmlspecialchars($row['name']) ?></td>
    

    <td style="color:<?= htmlspecialchars($cat_color) ?> ", class="footer"><?= htmlspecialchars($row['email']) ?></td>
  
    
    <td class="footer" width="1px"><input type="button" value="Edit" id="<?php echo htmlspecialchars($row['id']); ?>" onClick="this.style.color='gold';"
    class="submit edit_data" /></td>
  
   
    </form>
    </tr>
    
    
    <? } ?>
    </table><div id="bottom"></div>

    <script type="text/javascript">
// Store the input in a variable for reference.
var myInput = document.getElementById("myInput");
var savedValue = getSavedValue("myInput");

// Immediately filter the table and set the input value.
filterTable(savedValue);
myInput.value = savedValue;

//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e) {
  var id = e.id; // get the sender's id to save it . 
  var val = e.value; // get the value. 
  localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
    return ""; // You can change this to your default value. 
  }
  return localStorage.getItem(v);
}

function filterTable(value) {
  console.log(value);
  var filter = value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  for (var i = 0; i < rows.length; i  ) {
    var nameCol = rows[i].cells[1].textContent.toUpperCase();
    var rankCol = rows[i].cells[2].textContent.toUpperCase();
    var rankerCol = rows[i].cells[5].textContent.toUpperCase();
    var typeCol = rows[i].cells[6].textContent.toUpperCase();
    var emailCol = rows[i].cells[3].textContent.toUpperCase();
    if (nameCol.indexOf(filter) > -1 || rankCol.indexOf(filter) > -1 || rankerCol.indexOf(filter) > -1 || typeCol.indexOf(filter) > -1 || emailCol.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

myInput.addEventListener('keyup', function(event) {
  console.log(event); // Check if the event is fired.
  var value = event.target;
  saveValue(event);
  filterTable(value);
});

</script>
  

 myInput.addEventListener('keyup', function(event) {
 console.log(event); // Check if the event is fired.
 var value = event.target.value;
 saveValue(event);
 filterTable(value);
});
  

Это должно быть event.target.value. Вы пропустили свойство value