ספר טלפונים ב-html

pcinfogmach

מצו"ב קוד לספר טלפונים ב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>

dovid

נפלא!

נ.ב. המקור שמלמד אותך js הוא לא טוב/מיושן, כי סגנון הקוד (לא התוכן שלו) הוא לא מתאים לJS. הצהרת משתנים מראש היא מיותרת, מומלצת הצהרה והשמה באוהת שורה, ועדיף עם const.

Whenever

נחמד מאוד!
אולי אפשר להוסיף כפתורי מיון על ראש הtable לכל טור וטור.

pcinfogmach

@dovid כתב בספר טלפונים ב-html:

ועדיף עם const.

אשמח להסבר למה? תודה.

יהודי טוב

אני חושב שיותר נוח כשהחיפוש מחפש בכל העמודות, ובודק שכל מילה מופיעה באחד מהעמודות.

מצרף קוד שעושה את זה..

<!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 (ריאקט בקטנה...)

dovid

@יהודי-טוב כתב בספר טלפונים ב-html:

אני חושב שיותר הגיוני לא לכתוב לטבלה את השורות המפולטרות. ולבנות את הטבלה מחדש בכל שינוי.

למה זה יותר הגיוני?
~~ברוב הפרימוורקים של צד לקוח מקובל להסתיר ולהציג, ולא לבנות מחדש.~~

השתמשתי פעם עם טכנולוגיה שאני חושב שהיא מתאימה למקרים כאלו alpine.js (ריאקט בקטנה...)

~~זה באיזור חמש שורות קוד בלי שום טכנולוגיה מעבר לJS טהור.~~

יהודי טוב

@dovid כתב בספר טלפונים ב-html:

למה זה יותר הגיוני?
ברוב הפרימוורקים של צד לקוח מקובל להסתיר ולהציג, ולא לבנות מחדש.

מקבל..
אני עובד עם ריאקט, ולכן זה היה נראה לי יותר הגיוני

זה באיזור חמש שורות קוד בלי שום טכנולוגיה מעבר לJS טהור.

צדיק תמים

@pcinfogmach כתב בספר טלפונים ב-html:

@dovid כתב בספר טלפונים ב-html:

ועדיף עם const.

אשמח להסבר למה? תודה.

ל-var שהשתמשת, יש חסרון של סקופ (תוכל לקרוא עוד כאן: https://blog.chv.ovh/articles/js-variables-declaration וכאן: https://mitmachim.top/topic/25078), ולכן עדיף להשתמש בlet/const
שלב ב, מומלץ להשתמש דווקא בconst ולא let כשלא מתכננים לשנות את המשתנה, ראה על זה כאן: https://tchumim.com/topic/12743

dovid

@יהודי-טוב העיר לי באישי @צדיק-תמים שבעצם מה שהפרימוורקים עושים בד"כ זה כן הוצאה לגמרי של האלמנטים, כך שהערתי הייתה שגויה, עם כל זה ודאי שלא נכון להעיר למישהו על קוד כל עוד לא בטוח שהחלופה טובה יותר, מקובל במקרה הזה זה לא ראיה כי בלי פרימוורק יותר טבעי לכתוב כפי שהוא עשה (ולכן צדקת שאמרת שאתה השתמשת עבור זה בפרימוורק).
במילים אחרות כמישהו מעלה קוד לבחינה צריך לשפוט את זה בתנאים הנמצאים בקוד: אם זה הדרישה/המציאות, האם התוצאה והאופן בו היא הושגה הם טובים.

תחומים - פורום חרדי מקצועי

ספר טלפונים ב-html