#javascript
#javascript
Вопрос:
Я пытаюсь использовать следующий скрипт, чтобы позволить пользователю фильтровать строки в таблице на основе введенного им значения. Они могут обновить эту строку, после того как произойдет событие обновления, страница будет обновлена / обновлена, и на странице снова будут показаны все строки. Я пытаюсь найти способ сохранить строки, которые они отфильтровали после обновления / перезагрузки. Другими словами, как будто обновления никогда не происходило.
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>
Комментарии:
1. Я отредактировал сообщение. после некоторых изменений вопрос изменился. прошу прощения за предыдущий пост.
2. Решил ли мой ответ вашу проблему?
3. Я только что протестировал это. Да, это было решение моей проблемы. большое спасибо !!
Ответ №1:
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