מצו"ב קוד לספר טלפונים בhtml - אשמח לקבל משוב:
או למי שרוצה לראות את הקוד כאן בפורום:
<!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>
<select id="searchType">
<option value="name">שם</option>
<option value="occupation">מקצוע</option>
<option value="phone">טלפון</option>
<option value="email">מייל</option>
</select>
<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");
var columnIndex;
var select = document.getElementById("searchType");
var searchType = select.value;
if (searchType === "name") {
columnIndex = 0;
} else if (searchType === "phone") {
columnIndex = 1;
} else if (searchType === "email") {
columnIndex = 2;
} else if (searchType === "occupation") {
columnIndex = 3;
}
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[columnIndex];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
