אני חושב שיותר נוח כשהחיפוש מחפש בכל העמודות, ובודק שכל מילה מופיעה באחד מהעמודות.
מצרף קוד שעושה את זה..
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ספר טלפונים</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
select {
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
</style>
</head>
<body dir="rtl">
<h2>ספר טלפונים</h2>
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="חפש..">
<p>
<table id="phoneDirectory">
<tr>
<th>שם</th>
<th>מספר טלפון</th>
<th>כתובת דואר אלקטרוני</th>
<th>מקצוע</th>
</tr>
<tr>
<td>יוחנן כהן</td>
<td>123-456-7890</td>
<td>yochanan@example.com</td>
<td>מהנדס תוכנה</td>
</tr>
<tr>
<td>יצחק לוי</td>
<td></td>
<td>yitz@example.com</td>
<td>מעצב גרפי</td>
</tr>
<!-- Add more rows as needed -->
</table>
<script>
function searchTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("phoneDirectory");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
let rowString = '';
td = tr[i].getElementsByTagName("td");
for(let j = 0 ; j< td.length; j++){
txtValue = td[j].textContent || td[j].innerText;
rowString += txtValue;
}
const searchArr = filter.split(" ");
let isMatch = true;
searchArr.forEach((searchWord) => {
if (!rowString.includes(searchWord)) isMatch = false;
});
if (isMatch) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
</script>
</body>
</html>
ובלי קשר לא נחמד לי לראות שתכלס בעמוד יש לך את כל השורות, ואתה רק מסתיר אותם.
אני חושב שיותר הגיוני לא לכתוב לטבלה את השורות המפולטרות. ולבנות את הטבלה מחדש בכל שינוי.
השתמשתי פעם עם טכנולוגיה שאני חושב שהיא מתאימה למקרים כאלו alpine.js (ריאקט בקטנה...)
